/* =================================================================
   Spatial Mailbox — Design Tokens
   =================================================================
   Three-tier system following the W3C Design Tokens Format Module
   (2025.10 stable spec) and Refactoring UI conventions.

   1. PRIMITIVES — raw values (color scales, sizes). Never used directly.
   2. SEMANTIC  — purpose-named aliases that point at primitives. Use these.
   3. COMPONENT — scoped overrides that point at semantic tokens. Per-component.

   Naming pattern: {category}-{property}-{variant}-{state}
   Always describe purpose, not appearance: --color-error not --color-red.

   ⚠ DO NOT add raw #hex or rgba() values inside this file's component
   sections, or anywhere in styles.css. Always reference a token.
   ================================================================= */


/* ─────────────────────────────────────────────────────────────────
   1. PRIMITIVES — raw values
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Color scales ── */

  /* Brand purple (anchored at 500 = #667eea, the original brand color) */
  --purple-50:  #eef2ff;
  --purple-100: #e0e7ff;
  --purple-200: #c7d2fe;
  --purple-300: #a5b4fc;
  --purple-400: #818cf8;
  --purple-500: #667eea;  /* canonical brand */
  --purple-600: #5568d3;  /* hover */
  --purple-700: #4c4ddc;  /* active accent (already in use) */
  --purple-800: #3730a3;
  --purple-900: #1e1b4b;
  --purple-950: #110d2e;  /* dark-mode body base — deepest brand purple */

  /* Magenta accent (gradient end) */
  --magenta-500: #8d6cff;
  --magenta-600: #764ba2;  /* legacy --landing-accent-end */

  /* Neutrals — Tailwind-compatible gray scale for predictability */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;  /* lowest acceptable on white (4.83:1 — passes AA) */
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Ink — branded dark neutrals (for primary text + dark surfaces) */
  --ink-50:  #f8f9ff;   /* very light, page bg gradient stop */
  --ink-100: #eef2ff;   /* page bg gradient stop */
  --ink-500: #5b6178;   /* secondary text */
  --ink-700: #2d2d44;   /* dark text on subtle surfaces */
  --ink-900: #1a1a2e;   /* primary text, darkest */

  /* Functional colors */
  --success-500: #16a34a;  /* light-mode text — passes AA on white */
  --success-400: #4ade80;  /* dark-mode text — passes AA on dark surfaces */
  --success-50:  #f0fdf4;
  --warning-500: #d97706;
  --warning-400: #fbbf24;
  --warning-50:  #fffbeb;
  --error-500:   #dc2626;
  --error-400:   #f87171;
  --error-50:    #fef2f2;

  --white: #ffffff;
  --black: #000000;

  /* Brand purple at fixed alphas (replaces 168+ scattered rgba uses) */
  --purple-alpha-04: rgba(102, 126, 234, 0.04);
  --purple-alpha-08: rgba(102, 126, 234, 0.08);
  --purple-alpha-12: rgba(102, 126, 234, 0.12);
  --purple-alpha-16: rgba(102, 126, 234, 0.16);
  --purple-alpha-24: rgba(102, 126, 234, 0.24);
  --purple-alpha-35: rgba(102, 126, 234, 0.35);

  /* Pure-white at fixed alphas — for use over coloured/gradient backgrounds
     (e.g. icon backplates on the brand gradient) where purple-alpha would
     read as a tint instead of a frost. */
  --white-alpha-08: rgba(255, 255, 255, 0.08);
  --white-alpha-16: rgba(255, 255, 255, 0.16);
  --white-alpha-24: rgba(255, 255, 255, 0.24);

  /* ── Spacing — strict 4pt grid ── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Typography ── */

  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Fraunces', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;

  /* Modular scale (1.125 — Major Second) anchored at 16px base */
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px — never go below on mobile inputs */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  1.875rem;  /* 30px */
  --font-size-3xl:  2.25rem;   /* 36px */
  --font-size-4xl:  3rem;      /* 48px */

  --line-height-tight:   1.2;
  --line-height-snug:    1.35;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;
  --letter-spacing-eyebrow: 0.08em;

  /* ── Radii ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(48, 32, 96, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 36px rgba(48, 32, 96, 0.16), 0 6px 12px rgba(0, 0, 0, 0.06);

  /* Brand-tinted shadows for elevated branded elements (CTAs, FAB) */
  --shadow-brand-md: 0 8px 18px -8px rgba(76, 77, 220, 0.45);
  --shadow-brand-lg: 0 12px 28px -8px rgba(76, 77, 220, 0.55), 0 4px 8px -2px rgba(76, 77, 220, 0.35);

  /* ── Motion ── */
  --duration-instant: 0s;
  --duration-fast:    0.15s;
  --duration-normal:  0.25s;
  --duration-slow:    0.4s;

  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ── */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     50;
  --z-tabbar:  60;
  --z-fab:     61;
  --z-modal:   100;
  --z-toast:   200;
  --z-tooltip: 300;
}


/* ─────────────────────────────────────────────────────────────────
   2. SEMANTIC TOKENS — purpose-named aliases
   These are what styles.css and components SHOULD reference.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand ── */
  --color-brand:           var(--purple-500);
  --color-brand-hover:     var(--purple-600);
  --color-brand-pressed:   var(--purple-700);
  --color-brand-emphasis:  var(--purple-700);

  /* Brand gradient (CTAs, FAB) — paired stops */
  --gradient-brand: linear-gradient(135deg, #6c7bff 0%, var(--magenta-500) 100%);

  /* ── Surfaces (backgrounds) ── */
  --color-surface:           var(--white);              /* primary page surface (mobile) */
  --color-surface-raised:    var(--white);              /* cards, modals, popovers */
  --color-surface-card:      var(--white);              /* prominent cards — flips lighter than -raised in dark to actually read as a card */
  --color-surface-subtle:    var(--ink-50);             /* subtle bg accents */
  --color-surface-brand-soft: var(--purple-alpha-04);   /* tinted highlights */
  --color-surface-glass:     rgba(252, 252, 255, 0.78); /* translucent w/ backdrop-blur — header, sticky nav */
  --color-surface-glass-strong: rgba(252, 252, 255, 0.92); /* heavier glass — tab bar */
  --color-surface-overlay:   rgba(0, 0, 0, 0.5);        /* modal scrim */

  /* ── Borders ── */
  --color-border:        var(--purple-alpha-12);
  --color-border-strong: var(--purple-alpha-24);
  --color-border-subtle: var(--purple-alpha-08);
  --color-border-focus:  var(--color-brand);

  /* ── Text ── */
  --color-text-primary:    var(--ink-900);    /* main text — high contrast */
  --color-text-secondary:  var(--ink-500);    /* secondary copy */
  --color-text-muted:      var(--gray-500);   /* placeholders, captions, hints — passes AA on white */
  --color-text-disabled:   var(--gray-400);   /* disabled labels only */
  --color-text-inverse:    var(--white);      /* on dark/branded surfaces */
  --color-text-on-brand:   var(--white);      /* on always-purple gradient — never flips with theme */
  --color-text-brand:      var(--purple-700);
  --color-text-link:       var(--color-brand);
  --color-text-link-hover: var(--color-brand-hover);

  /* ── Status / Functional ── */
  --color-success:    var(--success-500);
  --color-success-bg: var(--success-50);
  --color-warning:    var(--warning-500);
  --color-warning-bg: var(--warning-50);
  --color-error:      var(--error-500);
  --color-error-bg:   var(--error-50);
  --color-info:       var(--color-brand);
  --color-info-bg:    var(--purple-alpha-08);

  /* ── Focus indicator ── */
  --focus-ring-color: var(--color-brand);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ── Standard radii in semantic terms ── */
  --radius-control: var(--radius-md);    /* buttons, inputs */
  --radius-card:    var(--radius-lg);    /* cards */
  --radius-modal:   var(--radius-xl);    /* modals, dialogs */
  --radius-pill:    var(--radius-full);  /* pills, chips, FAB */

  /* ── Standard shadows in semantic terms ── */
  --shadow-card:    var(--shadow-lg);
  --shadow-modal:   var(--shadow-xl);
  --shadow-button:  var(--shadow-sm);

  /* ── Touch / tap target minimums (Apple HIG / Material) ── */
  --tap-target-min: 44px;
}


/* ─────────────────────────────────────────────────────────────────
   3. RESPONSIVE BREAKPOINTS — single source of truth
   These are constants. CSS custom properties can't drive @media queries
   directly, but they document the system and back JS reads.
   ───────────────────────────────────────────────────────────────── */

:root {
  --bp-phone-sm:    375px;  /* iPhone SE */
  --bp-phone-md:    402px;  /* iPhone 16 Pro */
  --bp-phone-lg:    430px;  /* iPhone 16 Pro Max */
  --bp-phone-max:   600px;  /* upper bound for phone-only rules */
  --bp-tablet:      768px;
  --bp-tablet-lg:   1024px;
  --bp-laptop:      1080px;
  --bp-desktop:     1280px;
  --bp-wide:        1536px;
}


/* ─────────────────────────────────────────────────────────────────
   4. DARK MODE — semantic remap, opt-in via data-theme="dark"
   Primitives stay; only semantic tokens flip. No changes needed in
   component code that uses semantic tokens.

   Two activation modes:
   - System preference: @media (prefers-color-scheme: dark)
   - Explicit override: html[data-theme="dark"] (set by JS toggle)
   - Explicit light:    html[data-theme="light"] (force light even if
                        OS prefers dark)
   ───────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Surfaces — dark slate with brand-tinted highlights */
    --color-surface:            #0d0d1a;
    --color-surface-raised:     #1d1d36;
    --color-surface-card:       #23234a;
    --color-surface-subtle:     #16162b;
    --color-surface-brand-soft: rgba(102, 126, 234, 0.16);
    --color-surface-glass:      rgba(13, 13, 26, 0.78);
    --color-surface-glass-strong: rgba(13, 13, 26, 0.92);
    --color-surface-overlay:    rgba(0, 0, 0, 0.7);

    /* Borders — light alphas on dark */
    --color-border:        rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.20);
    --color-border-subtle: rgba(255, 255, 255, 0.06);
    --color-border-focus:  var(--purple-400);

    /* Text — inverted scale */
    --color-text-primary:   #f8f9ff;
    --color-text-secondary: #c7c9d4;
    --color-text-muted:     #9ca3af;
    --color-text-disabled:  #6b7280;
    --color-text-inverse:   #1a1a2e;
    --color-text-brand:     var(--purple-400);
    --color-text-link:      var(--purple-400);
    --color-text-link-hover: var(--purple-300);

    /* Brand — slightly lighter so it pops on dark */
    --color-brand:           var(--purple-400);
    --color-brand-hover:     var(--purple-300);
    --color-brand-pressed:   var(--purple-500);

    /* Status text — lighter shades pass AA on dark surfaces.
       Light mode #16a34a / #d97706 / #dc2626 text drops to ~3:1 on dark;
       the *-400 shades restore ~5:1+. */
    --color-success: var(--success-400);
    --color-warning: var(--warning-400);
    --color-error:   var(--error-400);

    /* Status backgrounds — desaturated for dark */
    --color-success-bg: rgba(22, 163, 74, 0.16);
    --color-warning-bg: rgba(217, 119, 6, 0.16);
    --color-error-bg:   rgba(220, 38, 38, 0.16);
    --color-info-bg:    rgba(102, 126, 234, 0.16);

    /* Focus ring — lighter purple for visibility */
    --focus-ring-color: var(--purple-400);
  }
}

/* Explicit dark override (JS-toggle) — same values, always active */
:root[data-theme="dark"] {
  --color-surface:            #0d0d1a;
  --color-surface-raised:     #16162b;
  --color-surface-card:       #23234a;
  --color-surface-subtle:     #1a1a2e;
  --color-surface-brand-soft: rgba(102, 126, 234, 0.16);
  --color-surface-glass:      rgba(13, 13, 26, 0.78);
  --color-surface-glass-strong: rgba(13, 13, 26, 0.92);
  --color-surface-overlay:    rgba(0, 0, 0, 0.7);

  --color-border:        rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.20);
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-focus:  var(--purple-400);

  --color-text-primary:   #f8f9ff;
  --color-text-secondary: #c7c9d4;
  --color-text-muted:     #9ca3af;
  --color-text-disabled:  #6b7280;
  --color-text-inverse:   #1a1a2e;
  --color-text-brand:     var(--purple-400);
  --color-text-link:      var(--purple-400);
  --color-text-link-hover: var(--purple-300);

  --color-brand:           var(--purple-400);
  --color-brand-hover:     var(--purple-300);
  --color-brand-pressed:   var(--purple-500);

  --color-success: var(--success-400);
  --color-warning: var(--warning-400);
  --color-error:   var(--error-400);

  --color-success-bg: rgba(22, 163, 74, 0.16);
  --color-warning-bg: rgba(217, 119, 6, 0.16);
  --color-error-bg:   rgba(220, 38, 38, 0.16);
  --color-info-bg:    rgba(102, 126, 234, 0.16);

  --focus-ring-color: var(--purple-400);
}

/* Tell the browser our pages support both schemes — affects scrollbar
   colors, form-control defaults, and prevents jarring white flashes. */
:root {
  color-scheme: light dark;
}


/* ─────────────────────────────────────────────────────────────────
   5. REDUCED MOTION — system-respecting motion override
   Components should reference --duration-* tokens; this snaps them
   all to 0 when the user prefers reduced motion.
   ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0s;
    --duration-normal: 0s;
    --duration-slow:   0s;
  }
}