/* ==========================================================================
   SciOly Design Tokens — drop-in CSS custom properties
   Source of truth: /DESIGN.md. Do not edit values here without updating DESIGN.md.

   Fonts: self-host for production. Dev CDN fallback:
     Satoshi:        https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap
     Instrument Sans: https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap
   ========================================================================== */

:root {
  /* ---- Brand & momentum ---- */
  --teal:          #0E9C96;  /* primary: actions, active nav, links, progress, hotspots */
  --teal-bright:   #12C7BE;  /* interactive tint / gradient partner */
  --teal-dark:     #0B7F7A;  /* pressed / on-white text */
  --amber:         #FFB020;  /* momentum: streak, XP  (REWARD ONLY) */
  --coral:         #FF6B4A;  /* momentum: celebration (REWARD ONLY) */

  /* ---- Ink & neutrals (cool grays) ---- */
  --ink:           #141A24;
  --bg:            #F7F9FA;
  --surface:       #FFFFFF;
  --surface-2:     #EEF1F4;
  --border:        #D5DBE0;
  --muted:         #8A94A0;
  --text:          #141A24;

  /* ---- Semantic ---- */
  --correct:       #1FA971;  /* pair with ✓ + text, never color alone */
  --error:         #E5484D;  /* pair with ✕ + text */
  --warning:       #FFB020;
  --info:          #0E9C96;

  /* ---- Radius (hierarchical) ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 9999px;

  /* ---- Spacing (4px base) ---- */
  --sp-2xs:2px; --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px;
  --sp-xl:20px; --sp-2xl:24px; --sp-3xl:32px; --sp-4xl:40px; --sp-5xl:48px; --sp-6xl:64px;

  /* ---- Type ---- */
  --font-display: 'Satoshi', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(20,26,36,.06);
  --shadow-md: 0 1px 2px rgba(20,26,36,.05), 0 10px 30px rgba(20,26,36,.07);
  --shadow-cta: 0 12px 26px -8px color-mix(in srgb, var(--teal) 65%, transparent);

  /* ---- Motion ---- */
  --ease-enter:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-reward:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 80ms; --dur-short: 180ms; --dur-medium: 300ms;
  --dur-long: 500ms; --dur-celebrate: 700ms;

  /* ---- Layout ---- */
  --content-max: 1180px;
  --session-max: 680px;   /* study-session canvas, centered */
  --sidebar-w:   220px;
  --filter-rail: 340px;
  --tap-min:     44px;
}

/* Dark: redesign surfaces, don't invert. Brighten teal for contrast. */
:root[data-theme="dark"] {
  --ink:       #EAF0F2;
  --bg:        #0D1117;
  --surface:   #161C24;
  --surface-2: #1E2630;
  --border:    #2A343F;
  --muted:     #8A94A0;
  --text:      #EAF0F2;
  --teal:      #12C7BE;
  --teal-dark: #0E9C96;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.45);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Any number that changes value must use tabular figures */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }