/* ============================================================================
   DoorPass — Design Tokens (single source of truth)
   ----------------------------------------------------------------------------
   Direction (set by Alex, 2026-07-22): the references are Apple / Google /
   Anthropic / Wispr Flow — LIGHT-FIRST, warm quiet neutrals, near-black text,
   ONE restrained deep-blue accent, soft real shadows. Explicitly NOT the
   dark+neon "vibe-coded" look: no cyan, no glows, no blue-black surfaces.

   Light is the default :root. Dark exists as a deliberate nighttime variant —
   warm graphite, desaturated accent — via prefers-color-scheme AND the manual
   [data-theme] hooks (data-theme always wins over the media query).

   After this file lands, NO screen hardcodes a design value that belongs here.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- COLOR: surfaces (light — warm paper, white cards) ---- */
  --color-bg-0:          #F7F5F2; /* page ground: warm paper, not gray, not cream */
  --color-bg-1:          #FFFFFF; /* card / raised surface */
  --color-bg-2:          #EFECE7; /* hover / popover / subtle wells */
  --color-bg-3:          #FFFFFF; /* modal / bottom sheet */
  --color-border:        #E4E1DB; /* hairline divider */
  --color-border-strong: #8F897E; /* input / non-text outline, 3:1+ on bg-0 */

  /* ---- COLOR: text (warm graphite, never pure black) ---- */
  --color-text-primary:   #1F1D1A; /* ~15.9:1 on bg-0 (AAA) */
  --color-text-secondary: #57534B; /* ~7.1:1 on bg-0 (AAA) */
  --color-text-tertiary:  #7A756B; /* ~4.6:1 — meta text on bg-0/bg-1 */

  /* ---- COLOR: accent + semantic (one deep slate blue; calm semantics) ---- */
  --color-accent:      #2D5F8A; /* deep slate blue — 6.1:1 on bg-0 as text */
  --color-accent-fg:   #FFFFFF; /* white ink on filled accent, 6.4:1 */
  --color-success:     #1E7A4E; /* calm green, 5.0:1 on bg-0 */
  --color-success-fg:  #FFFFFF;
  --color-warning:     #92600A; /* 5.4:1 on bg-0 */
  --color-danger:      #B3382E; /* 5.4:1 on bg-0 */
  --color-danger-fg:   #FFFFFF;

  /* Flat status tints (pills/badges/soft rings) — a flat mix, never a blur,
     never an outer glow. */
  --tint-accent:  color-mix(in srgb, var(--color-accent)  10%, transparent);
  --tint-success: color-mix(in srgb, var(--color-success) 12%, transparent);
  --tint-warning: color-mix(in srgb, var(--color-warning) 12%, transparent);
  --tint-danger:  color-mix(in srgb, var(--color-danger)  10%, transparent);
  --tint-neutral: color-mix(in srgb, var(--color-text-tertiary) 12%, transparent);

  /* "Unlocked" emphasis. Kept as a variable for compatibility, but it is now a
     SOFT FLAT TINT for ring treatments (0 0 0 Npx), NOT a luminous glow.
     Pages must not use it as a blurred outer glow. */
  --glow-success: color-mix(in srgb, var(--color-success) 16%, transparent);

  /* ---- SPACING (4px base grid) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- RADIUS ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ---- TYPE SCALE ---- */
  --font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", monospace;
  --text-display: 700 34px/1.15 var(--font-family);
  --text-title:   700 22px/1.25 var(--font-family);
  --text-heading: 600 17px/1.3  var(--font-family);
  --text-body:    400 15px/1.45 var(--font-family);
  --text-label:   500 13px/1.3  var(--font-family);
  --text-caption: 400 12px/1.3  var(--font-family);

  /* ---- MOTION: durations ---- */
  --dur-instant: 100ms;
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-medium:  350ms;
  --dur-slow:    450ms;
  --dur-door:    600ms;

  /* ---- MOTION: easing ---- */
  --ease-standard:         cubic-bezier(0.2, 0, 0, 1);
  --ease-standard-decel:   cubic-bezier(0, 0, 0, 1);
  --ease-standard-accel:   cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring-press:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- ELEVATION (soft, warm, physical — shadows, never glows) ---- */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(31, 29, 26, 0.06);
  --elevation-2: 0 4px 12px rgba(31, 29, 26, 0.08);
  --elevation-3: 0 16px 40px rgba(31, 29, 26, 0.14);
}

/* ---- DARK: the deliberate nighttime variant. Warm graphite (never blue-
   black), desaturated accent (never cyan), same soft-shadow physics. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg-0:          #151412;
    --color-bg-1:          #1D1C19;
    --color-bg-2:          #242320;
    --color-bg-3:          #2A2926;
    --color-border:        #34322E;
    --color-border-strong: #6E6A61;

    --color-text-primary:   #F1EFEA;
    --color-text-secondary: #ABA79E;
    --color-text-tertiary:  #817D74;

    --color-accent:      #8FB4D6; /* desaturated slate — reads calm, not neon */
    --color-accent-fg:   #10202E;
    --color-success:     #58B287;
    --color-success-fg:  #0C1F16;
    --color-warning:     #D2A45A;
    --color-danger:      #E06C62;
    --color-danger-fg:   #240807;

    --glow-success: color-mix(in srgb, var(--color-success) 18%, transparent);

    --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.4);
    --elevation-3: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

/* ---- Manual theme override hooks. data-theme wins over the media query. ---- */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-0:          #151412;
  --color-bg-1:          #1D1C19;
  --color-bg-2:          #242320;
  --color-bg-3:          #2A2926;
  --color-border:        #34322E;
  --color-border-strong: #6E6A61;

  --color-text-primary:   #F1EFEA;
  --color-text-secondary: #ABA79E;
  --color-text-tertiary:  #817D74;

  --color-accent:      #8FB4D6;
  --color-accent-fg:   #10202E;
  --color-success:     #58B287;
  --color-success-fg:  #0C1F16;
  --color-warning:     #D2A45A;
  --color-danger:      #E06C62;
  --color-danger-fg:   #240807;

  --glow-success: color-mix(in srgb, var(--color-success) 18%, transparent);

  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.4);
  --elevation-3: 0 16px 40px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;

  --color-bg-0:          #F7F5F2;
  --color-bg-1:          #FFFFFF;
  --color-bg-2:          #EFECE7;
  --color-bg-3:          #FFFFFF;
  --color-border:        #E4E1DB;
  --color-border-strong: #8F897E;

  --color-text-primary:   #1F1D1A;
  --color-text-secondary: #57534B;
  --color-text-tertiary:  #7A756B;

  --color-accent:      #2D5F8A;
  --color-accent-fg:   #FFFFFF;
  --color-success:     #1E7A4E;
  --color-success-fg:  #FFFFFF;
  --color-warning:     #92600A;
  --color-danger:      #B3382E;
  --color-danger-fg:   #FFFFFF;

  --glow-success: color-mix(in srgb, var(--color-success) 16%, transparent);

  --elevation-1: 0 1px 2px rgba(31, 29, 26, 0.06);
  --elevation-2: 0 4px 12px rgba(31, 29, 26, 0.08);
  --elevation-3: 0 16px 40px rgba(31, 29, 26, 0.14);
}

/* ---- REDUCED MOTION: collapse durations; kill overshoot. ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    120ms;
    --dur-medium:  120ms;
    --dur-slow:    150ms;
    --dur-door:    200ms;

    --ease-spring-press:     ease;
    --ease-emphasized-decel: ease;
    --ease-emphasized-accel: ease;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}