/* ============================================================
   Tokens.css — authoritative design system tokens.
   Loaded BEFORE app.css so app.css legacy mappings can read these.
   Master prompt: Aptis Visual & Motion Upgrade (2026-05).

   Scope:
     :root  -> shared base tokens used everywhere.
     .ds-v2 -> opt-in scope for migrated surfaces (dashboard,
               sidebar v2, module switcher, future pages).
   Legacy tokens (--primary-600, --surface, --text-900...) live
   in app.css and remain for un-migrated pages.
============================================================ */

:root {
  /* ----- Brand ----- */
  --brand-primary:       #085041;   /* dark teal — primary CTA, active state */
  --brand-primary-dark:  #04342C;   /* hero bg, hover on primary */
  --brand-primary-soft:  #E1F5EE;   /* subtle bg, sidebar hover */
  --brand-accent:        #9FE1CB;
  --primary-ring:        rgba(15, 110, 86, 0.18);

  /* ----- Surfaces ----- */
  --bg-base:     #FAFAF7;
  --bg-surface:  #FFFFFF;
  --bg-muted:    #F1EFE8;
  --bg-elevated: #FFFFFF;

  /* ----- Borders ----- */
  --border-subtle:  rgba(0,0,0,0.08);
  --border-default: rgba(0,0,0,0.15);
  --border-strong:  rgba(0,0,0,0.25);
  --border-hairline: 0.5px;

  /* ----- Text ----- */
  --text-primary:   #1A1A18;
  --text-secondary: #5F5E5A;
  --text-tertiary:  #888780;
  --text-on-brand:  #FFFFFF;

  /* ----- Topic / category ramps ----- */
  --c-amber-bg:  #FAEEDA;  --c-amber-fg:  #BA7517;
  --c-blue-bg:   #E6F1FB;  --c-blue-fg:   #185FA5;
  --c-purple-bg: #EEEDFE;  --c-purple-fg: #534AB7;
  --c-pink-bg:   #FBEAF0;  --c-pink-fg:   #993556;
  --c-coral-bg:  #FAECE7;  --c-coral-fg:  #993C1D;
  --c-teal-bg:   #E1F5EE;  --c-teal-fg:   #0F6E56;
  --c-green-bg:  #EAF3DE;  --c-green-fg:  #639922;

  /* ----- Module dots (segmented switcher) ----- */
  --dot-aptis:  #085041;
  --dot-vstep:  #639922;
  --dot-toeic:  #BA7517;
  --dot-ielts:  #534AB7;

  /* ----- Semantic ----- */
  --info-token:    #185FA5;  --info-bg-token:    #E6F1FB;
  --success-token: #3B6D11;  --success-bg-token: #EAF3DE;
  --warning-token: #854F0B;  --warning-bg-token: #FAEEDA;
  --danger-token:  #A32D2D;  --danger-bg-token:  #FCEBEB;

  /* ----- Difficulty ----- */
  --diff-easy:   #639922;
  --diff-medium: #BA7517;
  --diff-hard:   #A32D2D;

  /* ----- Shape ----- */
  --radius-card:  12px;
  --radius-input: 8px;
  --radius-pill:  999px;

  /* ----- Functional shadows ----- */
  --shadow-hover: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-modal: 0 8px 32px rgba(0,0,0,0.16);
  --shadow-focus: 0 0 0 3px var(--primary-ring);

  /* ----- Typography ----- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ----- Motion durations ----- */
  --motion-instant:   100ms;
  --motion-fast:      150ms;
  --motion-base:      250ms;
  --motion-slow:      400ms;
  --motion-slower:    600ms;
  --motion-celebrate: 1500ms;

  /* ----- Motion easings ----- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;

  /* ----- Stagger delays ----- */
  --stagger-tight: 30ms;
  --stagger-base:  50ms;
  --stagger-loose: 80ms;
}

/* Dark mode — only inside .ds-v2 containers so legacy pages stay light. */
@media (prefers-color-scheme: dark) {
  .ds-v2 {
    --bg-base:    #1A1A18;
    --bg-surface: #242422;
    --bg-muted:   #2C2C2A;
    --bg-elevated:#2C2C2A;

    --text-primary:   #F5F5F2;
    --text-secondary: #B4B2A9;
    --text-tertiary:  #888780;

    --border-subtle:  rgba(255,255,255,0.08);
    --border-default: rgba(255,255,255,0.15);
    --border-strong:  rgba(255,255,255,0.25);

    --brand-primary-soft: #0F2A24;

    --c-amber-bg:  #633806;  --c-amber-fg:  #FAC775;
    --c-blue-bg:   #0C447C;  --c-blue-fg:   #B5D4F4;
    --c-purple-bg: #3C3489;  --c-purple-fg: #CECBF6;
    --c-pink-bg:   #72243E;  --c-pink-fg:   #F4C0D1;
    --c-coral-bg:  #712B13;  --c-coral-fg:  #F5C4B3;
    --c-teal-bg:   #085041;  --c-teal-fg:   #9FE1CB;
    --c-green-bg:  #27500A;  --c-green-fg:  #C0DD97;
  }
}

/* Reduced motion guard — disable animation/transition globally
   while keeping opacity changes for state clarity. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant:   0ms;
    --motion-fast:      0ms;
    --motion-base:      0ms;
    --motion-slow:      0ms;
    --motion-slower:    0ms;
    --motion-celebrate: 0ms;
    --stagger-tight:    0ms;
    --stagger-base:     0ms;
    --stagger-loose:    0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Apply Inter as the page-wide default. Legacy --font-primary
   in app.css already aliases to Inter (see edit). */
html, body {
  font-family: var(--font-sans);
}