/* ============================================================================
   Cognesia Design Tokens — light-primary, dark via [data-theme="dark"]
   File: design-tokens.css   v0.1   2026-05-01
   Source: 2026-04-30-branding-starter-spec.md (lines 300–375), adapted to
   light-default per Remy reference (#FFFFFF bg, rgb(64,64,255) accent).
   Manual toggle only — no prefers-color-scheme auto-dark.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Font stacks --------------------------------------------------- */
  --font-sans:    "Inter", "Inter Variable", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter Display", "Inter", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-serif:   "Source Serif 4", Georgia, serif;

  /* ---- Color tokens — LIGHT (default) -------------------------------- */
  /* 2026-05-02: palette shift — beige+turquoise → aqua-blue (Kian rejected green) */
  --bg:            #e8f0f5;
  --bg-elevated:   #f4f8fb;
  --bg-overlay:    rgba(20, 25, 30, 0.40);
  --surface:       #d8e3ec;
  --border:        #c5d3df;
  --border-strong: #94a8b8;
  --text:          #1a1f24;
  --text-muted:    #5a6470;
  --text-subtle:   #7a8694;

  --accent:        #0891b2;
  --accent-hover:  #0aa5cf;
  --accent-fg:     #f4f8fb;
  --warm:          #c97543;
  --warm-soft:     #e08962;
  --success:       #1a8a55;
  --warning:       #c8851a;
  --danger:        #b84743;
  --ring:          rgba(8, 145, 178, 0.45);

  /* ---- Type scale (px) ----------------------------------------------- */
  --text-2xs:      11px;
  --text-xs:       12px;
  --text-sm:       13px;
  --text-base:     14px;
  --text-md:       16px;
  --text-lg:       18px;
  --text-xl:       22px;
  --text-2xl:      28px;
  --text-3xl:      36px;
  --text-display:  56px;

  --lh-2xs:        1.3;
  --lh-xs:         1.4;
  --lh-sm:         1.45;
  --lh-base:       1.5;
  --lh-md:         1.55;
  --lh-lg:         1.45;
  --lh-xl:         1.3;
  --lh-2xl:        1.2;
  --lh-3xl:        1.1;
  --lh-display:    1.0;

  --tr-2xs:        0.02em;
  --tr-xs:         0.01em;
  --tr-sm:         0;
  --tr-base:       0;
  --tr-md:        -0.005em;
  --tr-lg:        -0.01em;
  --tr-xl:        -0.015em;
  --tr-2xl:       -0.02em;
  --tr-3xl:       -0.025em;
  --tr-display:   -0.03em;

  /* ---- Radius -------------------------------------------------------- */
  --radius-xs:     6px;
  --radius-sm:     10px;
  --radius-md:     14px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-pill:   9999px;

  /* ---- Shadows — LIGHT (4 tiers) ------------------------------------- */
  --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-2: 0 2px 6px rgba(20, 20, 20, 0.08), 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-3: 0 8px 24px rgba(20, 20, 20, 0.10), 0 2px 6px rgba(20, 20, 20, 0.05);
  --shadow-4: 0 24px 64px rgba(20, 20, 20, 0.16), 0 8px 24px rgba(20, 20, 20, 0.08);

  /* ---- Motion -------------------------------------------------------- */
  --motion-instant: 0ms;
  --motion-fast:    150ms;
  --motion-med:     220ms;
  --motion-slow:    320ms;
  --motion-extra:   480ms;

  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-out:        cubic-bezier(0.0, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout -------------------------------------------------------- */
  --container-max:    680px;
  --container-narrow: 560px;
}

/* ===== DARK toggle — manual via [data-theme="dark"] only ================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0d1822;
  --bg-elevated:   #142233;
  --bg-overlay:    rgba(0, 0, 0, 0.72);
  --surface:       #102032;
  --border:        #244a64;
  --border-strong: #3a6a8a;
  --text:          #ecf2f8;
  --text-muted:    #9fb0c0;
  --text-subtle:   #8aa0b4;
  --accent:        #38bdf8;
  --accent-hover:  #5fcfff;
  --accent-fg:     #0d1822;
  --warm:          #e08962;
  --success:       #4dc18e;
  --warning:       #e0b341;
  --danger:        #f1556a;
  --ring:          rgba(56, 189, 248, 0.55);

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-4: 0 24px 64px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ===== Reduced motion — zero out durations ============================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0ms;
    --motion-fast:    0ms;
    --motion-med:     0ms;
    --motion-slow:    0ms;
    --motion-extra:   0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}