/* ============================================================
   HAPTO, DESIGN TOKENS
   ============================================================
   Single source of truth for the design system.
   Two-tier token architecture:
     1. Primitives, raw values, theme-agnostic
     2. Semantics, role-based, theme-switchable
   Consumers should ONLY reference semantic tokens.
   Reference: ../design-tokens.json (DTCG format) mirrors this file.

   Hapto = playful-premium consumer-creative. Light is the default
   (consumers); dark ships alongside. Coral primary, violet accent,
   sun highlight (sparing). Warm-tinted neutrals + soft elevation.
   ============================================================ */

/* ---------- LAYER 1: PRIMITIVES --------------------------- */

:root {
  /* Brand, Hapto Coral (primary actions, brand hue, active states) */
  --coral-50:  #FFF1F4;
  --coral-100: #FFD9E1;
  --coral-200: #FFB3C3;
  --coral-300: #FF87A0;
  --coral-400: #FF4D6D;   /* ★ PRIMARY BRAND HUE */
  --coral-500: #ED2E54;
  --coral-600: #C81E42;
  --coral-700: #9C1632;
  --coral-800: #6E1024;
  --coral-900: #470A17;

  /* Accent, Hapto Violet (secondary accents, gradients, links) */
  --violet-50:  #F1EEFF;
  --violet-100: #DCD6FB;
  --violet-200: #BDB2F6;
  --violet-300: #998CF0;
  --violet-400: #6C5CE7;   /* ★ ACCENT HUE */
  --violet-500: #5544D4;
  --violet-600: #4334B0;
  --violet-700: #33288A;
  --violet-800: #231C60;
  --violet-900: #16113C;

  /* Highlight, Hapto Sun (credits/rewards, sparing highlights ≤5%) */
  --sun-50:  #FFF7E6;
  --sun-100: #FFEABF;
  --sun-200: #FFD98A;
  --sun-300: #FFCB60;
  --sun-400: #FFC247;   /* ★ HIGHLIGHT HUE */
  --sun-500: #F0A91F;
  --sun-600: #C9890F;
  --sun-700: #98660B;

  /* Neutrals, warm-tinted (premium, slightly violet-warm) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FFF7F4;   /* warm light bg */
  --neutral-100: #FBEDEE;
  --neutral-200: #F0E4E8;
  --neutral-300: #DBD0DA;
  --neutral-400: #B3A7BC;
  --neutral-500: #847A92;
  --neutral-600: #5C5468;
  --neutral-700: #3D3548;
  --neutral-800: #2A2238;   /* raised dark surface */
  --neutral-900: #211B2E;   /* dark surface */
  --neutral-950: #171320;   /* ink */
  --neutral-1000:#0E0B16;

  /* Semantic hues, 5-tier each, warm-premium register */
  /* Info (informational, calm) */
  --info-subtle:  #1B2647;
  --info-muted:   #3A5BB0;
  --info-default: #5B8DEF;
  --info-strong:  #93B5F5;
  --info-intense: #C9DBFB;

  /* OK (success, generated, credited) */
  --ok-subtle:    #0E2C22;
  --ok-muted:     #14855C;
  --ok-default:   #1FB57A;
  --ok-strong:    #5FD3A4;
  --ok-intense:   #AEEBD2;

  /* Warn (caution, low credits, review) */
  --warn-subtle:  #2E2206;
  --warn-muted:   #A6740F;
  --warn-default: #F5A623;
  --warn-strong:  #F8C167;
  --warn-intense: #FBDFA9;

  /* Crit (error, failed, refunded) */
  --crit-subtle:  #2E0F12;
  --crit-muted:   #A1282C;
  --crit-default: #E5484D;
  --crit-strong:  #EF8488;
  --crit-intense: #F7BFC1;

  /* ---------- TYPOGRAPHY PRIMITIVES ------------------- */

  /* Font stacks. Display = Clash Display (Space Grotesk on Google Fonts
     as the web substitute, since Clash Display isn't served there). */
  --font-display:
    "Clash Display", "Space Grotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --font-mono:
    "JetBrains Mono", "SF Mono", "Fira Code",
    ui-monospace, Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  /* Type scale: xs 12 · sm 14 · base 16 · lg 18 · xl 22 · 2xl 30 · 3xl 44 · 4xl 64 */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;   /* body default */
  --text-md:   16px;   /* alias of base */
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  30px;
  --text-3xl:  44px;
  --text-4xl:  64px;   /* hero */

  /* Line heights, semantic */
  --leading-display: 1.05;
  --leading-heading: 1.2;
  --leading-body:    1.5;
  --leading-dense:   1.35;
  --leading-mono:    1.5;

  /* Letter-spacing, semantic */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.1em;

  /* ---------- SPACE, 4px base scale ------------------ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADIUS (generous + rounded) ------------ */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* ---------- MOTION (quick + springy) --------------- */
  --dur-instant: 90ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
  --dur-ambient: 2600ms;

  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* delight / springy */
  --ease-out-brand: cubic-bezier(0.22, 0.9, 0.32, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ---------- Z-INDEX --------------------------------- */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   100;
  --z-nav:      500;
  --z-overlay:  1000;
  --z-modal:    2000;
  --z-toast:    3000;
  --z-tooltip:  4000;

  /* ---------- LAYOUT ---------------------------------- */
  --container-sm:   720px;
  --container-md:   960px;
  --container-lg:   1200px;
  --container-xl:   1360px;
  --container-full: 100%;

  --gutter-page: var(--space-5);

  /* ---------- BRAND GRADIENT (hero/marketing only) ---- */
  --gradient-brand: linear-gradient(135deg, var(--coral-400) 0%, var(--violet-400) 100%);
}

/* ---------- LAYER 2: SEMANTIC TOKENS ---------------------- */
/* Defaults to LIGHT (consumer default). Dark overrides below. */

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

  /* Surfaces, tone-led elevation */
  --surface-canvas:   var(--neutral-50);    /* warm page bg */
  --surface-raised:   var(--neutral-0);     /* section bands */
  --surface-overlay:  var(--neutral-0);     /* cards / panels */
  --surface-floating: var(--neutral-0);     /* modals / popovers */
  --surface-sunken:   var(--neutral-100);   /* wells / code */
  --surface-inverse:  var(--neutral-950);

  /* Text */
  --text-strong:    #171320;   /* primary headings */
  --text-default:   #2E2740;   /* body */
  --text-subtle:    #5C5468;   /* secondary */
  --text-faint:     #847A92;   /* tertiary / timestamps */
  --text-disabled:  #B3A7BC;
  --text-on-accent: #FFFFFF;   /* white on coral/violet button */
  --text-on-sun:    var(--neutral-950);   /* ink on sun highlight */

  /* Borders */
  --border-subtle:  rgba(23, 19, 32, 0.07);
  --border-default: rgba(23, 19, 32, 0.13);
  --border-strong:  rgba(23, 19, 32, 0.22);
  --border-accent:  color-mix(in oklab, var(--coral-400) 45%, transparent);
  --border-focus:   var(--coral-400);

  /* Brand, semantic aliases */
  --brand-primary:        var(--coral-400);
  --brand-primary-hover:  var(--coral-500);
  --brand-primary-active: var(--coral-600);
  --brand-primary-muted:  var(--coral-50);
  --brand-accent:         var(--violet-400);
  --brand-accent-hover:   var(--violet-500);
  --brand-accent-muted:   var(--violet-50);
  --brand-highlight:      var(--sun-400);
  --brand-highlight-muted:var(--sun-50);

  /* State colors, subtle/strong pairs */
  --state-info-subtle:  #E9F1FE;
  --state-info-strong:  #3A6FD8;
  --state-ok-subtle:    #E4F7EF;
  --state-ok-strong:    #128055;
  --state-warn-subtle:  #FCF1DD;
  --state-warn-strong:  #9A6608;
  --state-crit-subtle:  #FCE6E7;
  --state-crit-strong:  #C32D32;

  /* Elevation, soft + diffuse + warm-tinted (3 levels + glows) */
  --elev-1: 0 1px 2px rgba(112, 16, 36, 0.06), 0 1px 3px rgba(112, 16, 36, 0.05);
  --elev-2: 0 6px 16px rgba(112, 16, 36, 0.08), 0 2px 6px rgba(112, 16, 36, 0.06);
  --elev-3: 0 18px 40px rgba(112, 16, 36, 0.12), 0 6px 14px rgba(112, 16, 36, 0.08);

  /* Brand glow, emphasis only */
  --glow-sm: 0 4px 18px color-mix(in oklab, var(--coral-400) 30%, transparent);
  --glow-md: 0 8px 32px color-mix(in oklab, var(--coral-400) 26%, transparent);
  --glow-accent: 0 8px 32px color-mix(in oklab, var(--violet-400) 28%, transparent);
  --glow-sun: 0 0 22px color-mix(in oklab, var(--sun-400) 45%, transparent);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--coral-400) 45%, transparent);
}

/* ---------- DARK THEME ------------------------------------ */

[data-theme="dark"] {
  color-scheme: dark;

  --surface-canvas:   var(--neutral-950);   /* ink */
  --surface-raised:   var(--neutral-900);
  --surface-overlay:  var(--neutral-900);
  --surface-floating: var(--neutral-800);
  --surface-sunken:   var(--neutral-1000);
  --surface-inverse:  var(--neutral-50);

  --text-strong:    #FBF5F8;
  --text-default:   #E4DCEA;
  --text-subtle:    #B3A7BC;
  --text-faint:     #847A92;
  --text-disabled:  #5C5468;
  --text-on-accent: #FFFFFF;
  --text-on-sun:    var(--neutral-950);

  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.13);
  --border-strong:  rgba(255, 255, 255, 0.22);
  --border-accent:  color-mix(in oklab, var(--coral-400) 45%, transparent);
  --border-focus:   var(--coral-400);

  --brand-primary:        var(--coral-400);
  --brand-primary-hover:  var(--coral-300);
  --brand-primary-active: var(--coral-500);
  --brand-primary-muted:  color-mix(in oklab, var(--coral-400) 16%, var(--neutral-950));
  --brand-accent:         var(--violet-400);
  --brand-accent-hover:   var(--violet-300);
  --brand-accent-muted:   color-mix(in oklab, var(--violet-400) 18%, var(--neutral-950));
  --brand-highlight:      var(--sun-400);
  --brand-highlight-muted:color-mix(in oklab, var(--sun-400) 16%, var(--neutral-950));

  --state-info-subtle:  var(--info-subtle);
  --state-info-strong:  var(--info-default);
  --state-ok-subtle:    var(--ok-subtle);
  --state-ok-strong:    var(--ok-default);
  --state-warn-subtle:  var(--warn-subtle);
  --state-warn-strong:  var(--warn-default);
  --state-crit-subtle:  var(--crit-subtle);
  --state-crit-strong:  var(--crit-default);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --elev-2: 0 6px 18px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40);
  --elev-3: 0 18px 44px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.45);

  --glow-sm: 0 4px 20px color-mix(in oklab, var(--coral-400) 38%, transparent);
  --glow-md: 0 8px 36px color-mix(in oklab, var(--coral-400) 32%, transparent);
  --glow-accent: 0 8px 36px color-mix(in oklab, var(--violet-400) 36%, transparent);
  --glow-sun: 0 0 24px color-mix(in oklab, var(--sun-400) 50%, transparent);

  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--coral-400) 50%, transparent);
}

/* Auto-switch to dark based on OS preference unless data-theme is explicit */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --surface-canvas:   var(--neutral-950);
    --surface-raised:   var(--neutral-900);
    --surface-overlay:  var(--neutral-900);
    --surface-floating: var(--neutral-800);
    --surface-sunken:   var(--neutral-1000);
    --surface-inverse:  var(--neutral-50);

    --text-strong:   #FBF5F8;
    --text-default:  #E4DCEA;
    --text-subtle:   #B3A7BC;
    --text-faint:    #847A92;
    --text-disabled: #5C5468;

    --border-subtle:  rgba(255, 255, 255, 0.07);
    --border-default: rgba(255, 255, 255, 0.13);
    --border-strong:  rgba(255, 255, 255, 0.22);

    --brand-primary:       var(--coral-400);
    --brand-primary-hover: var(--coral-300);

    --state-info-subtle:  var(--info-subtle);
    --state-info-strong:  var(--info-default);
    --state-ok-subtle:    var(--ok-subtle);
    --state-ok-strong:    var(--ok-default);
    --state-warn-subtle:  var(--warn-subtle);
    --state-warn-strong:  var(--warn-default);
    --state-crit-subtle:  var(--crit-subtle);
    --state-crit-strong:  var(--crit-default);

    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
    --elev-2: 0 6px 18px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40);
    --elev-3: 0 18px 44px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- FORCED-COLORS (High Contrast Mode) ------------ */
@media (forced-colors: active) {
  :root {
    --brand-primary: CanvasText;
    --text-strong:   CanvasText;
    --text-default:  CanvasText;
    --text-subtle:   CanvasText;
    --border-focus:  Highlight;
  }
}

/* ---------- REDUCED MOTION -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-ambient: 0ms;
  }
}