/* KVCoders 2.0 -- Design Tokens
 *
 * Canonical values from documentation/design/KVCODERS_UI_UX_2_0_MASTER_PLAN.md
 * Part 1 (Brand + Visual Identity). This file defines custom properties
 * only -- no selectors beyond :root and the two data-theme states, no
 * component styling. See assets/css/components.css for recipes built on
 * top of these tokens.
 *
 * Two separate token families on purpose (Master Plan Part 1.5, "cockpit
 * chrome, theme-able canvas"):
 *   --ink-*      the chrome scale. Always dark. Never affected by
 *                data-theme. Used by header/sidebar/navbar/footer only.
 *   --surface-*  the content-canvas scale. Responds to
 *                [data-theme="dark"] on a page/document that opts in.
 *                Used by everything INSIDE the chrome.
 * A page must never use --ink-* for its own content, and chrome must
 * never use --surface-*, or the "constant frame, theme-able canvas"
 * model breaks by accident rather than by a deliberate design change.
 */

:root {
  /* Brand -- primary actions, links, focus rings. A deliberate small
     violet shift off Tailwind's stock indigo-600 (#4f46e5), which the
     app converged on unforced but was never a chosen value. */
  --brand-600: #5B4FE8;
  --brand-700: #4A3FC4; /* hover/active state */
  --brand-100: #EEECFD; /* tint backgrounds, selected states */

  /* Subject identity -- reserved exclusively for CS/IP-scoped UI: the
     class/subject switcher, progress rings, a content card's subject
     tag. Never used decoratively. */
  --cs-500: #14B8A6; /* Computer Science (083) -- teal, "systems/logic" */
  --cs-100: #E6FBF7;
  --ip-500: #F59E0B; /* Informatics Practices (065) -- amber, "data/practice" */
  --ip-100: #FEF3E2;
  /* Text/icon-safe variants -- --cs-500/--ip-500 alone are decorative-only
     (borders, dots, gradients): measured via WCAG contrast math against
     both --cs-100/--ip-100 tints and white, --cs-500 lands at 3.48:1 and
     --ip-500's white-on-button pairing at 2.15:1, both failing AA's
     4.5:1 for text (found via axe-core on Phase 2's public homepage
     rebuild, in a class components.css's own .badge-cs/.badge-ip already
     carried since Phase 1 -- fixed there too, not just here). Use these
     two whenever the subject color carries actual text, an icon glyph,
     or sits as a button background under white text; keep --cs-500/
     --ip-500 for borders/dots/gradients only. */
  --cs-700: #0F766E; /* 5.08:1 on --cs-100, 5.47:1 on white */
  --ip-700: #92400E; /* 6.46:1 on --ip-100, 7.09:1 on white */
  /* Light-on-dark counterparts (KVCoders 3.0) -- for subject-identity
     text/icons inside a --stage-dark panel (components.css) or any
     --ink-* chrome context. 12-13:1 against --ink-950/--ink-900, wide
     margin, computed before use. */
  --cs-400: #5EEAD4;
  --ip-400: #FCD34D;

  /* Ink -- the permanent dark chrome scale. Refines the app's existing
     #020617/#0f172a near-black pair into one named scale. */
  --ink-950: #0A0E1A;
  --ink-900: #0F172A;
  --ink-800: #1E293B;

  /* Neutral scale -- already the de facto standard (Tailwind slate)
     across the app; formalized, not replaced. */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-900: #0F172A;

  /* Semantic state -- system feedback only (success/warning/danger).
     Warning is deliberately orange, not amber -- amber is claimed by
     the IP-065 subject identity above; reusing it for "needs your
     attention" would collapse two unrelated meanings into one color. */
  --success-500: #10B981;
  --warning-500: #F97316;
  --danger-500:  #EF4444;

  /* Typography -- 9 active families collapse to 3. See Master Plan
     Part 1.3 for the retirement list (Plus Jakarta Sans, Outfit, Inter
     as a UI face, Space Grotesk, DM Mono, Lora, Poppins, Fira Code,
     Times New Roman). Retirement happens page-by-page as each surface
     is migrated in its own phase, not by removing font-loading
     capability platform-wide in one step -- see
     KVCODERS_UI_UX_2_0_PHASE1_FOUNDATION.md's migration/deprecation
     section for why the shared Google Fonts request itself is not
     truncated in this phase. */
  --font-display: 'Sora', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Type scale -- 4px base unit, six steps. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  40px;

  /* Spacing -- 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius -- three tiers replace ~15 independently-invented values. */
  --radius-sm: 8px;  /* inputs, small buttons, badges */
  --radius-md: 16px; /* cards, panels */
  --radius-lg: 24px; /* modals, hero surfaces, auth stage */

  /* Shadow -- three tiers replace a dozen ad hoc rgba() values. */
  --shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.10);
  --shadow-lg: 0 24px 48px -12px rgba(15,23,42,0.18);

  /* Motion -- the easing curve already defined (and already good) in
     examiner/assets/css/ui.css, adopted platform-wide. */
  --ease: cubic-bezier(.4,0,.2,1);
  --duration-micro:    150ms; /* hover, focus */
  --duration-standard: 250ms; /* card lift, drawer state */
  --duration-emphasis: 400ms; /* modal entrance, success confirmation */

  /* Breakpoints -- three tiers replace the 860/900/992/1024px scatter
     found across the app. Consumed as literal px values inside
     @media rules (custom properties are not usable inside media-query
     conditions), documented here as the single source of truth other
     stylesheets copy from. */
  --bp-tablet: 1024px; /* sidebar/drawer collapse point */
  --bp-mobile: 768px;  /* multi-column -> single column */
  --bp-small:  480px;  /* icon-only controls, compressed type scale */

  /* Content-canvas surfaces -- light default. Chrome must never
     reference these; see file header.
     KVCoders 3.0: --surface-canvas moves from pure white to a warm
     neutral -- validated in the 3.0 homepage design exploration as
     calmer for sustained reading (lessons, question text) than a
     clinical white, while staying visually close enough not to
     disrupt Phase 1/2 surfaces still using it (dashboard, exams hub).
     --surface-card stays pure white so cards visibly sit "above" the
     page, a deliberate two-tone layering, not an oversight.
     --text-canvas-muted was #64748B (slate-500) -- re-measured against
     the new --surface-canvas at 4.52:1, a razor-thin pass of WCAG AA's
     4.5:1 (the same class of thin-margin risk flagged and avoided in
     Phase 2). Moved to a darker value with real margin instead. */
  --surface-canvas: #FAF9F6;
  --surface-card:   #FFFFFF;
  --surface-alt:    #F1EFE9;
  --text-canvas:     #0F172A;
  --text-canvas-muted: #475569; /* 7.26:1 on --surface-canvas, verified */
  --border-canvas:  #E4E0D6;
}

:root[data-theme="dark"] {
  --surface-canvas: #020617;
  --surface-card:   #1E293B;
  --surface-alt:    #0F172A;
  --text-canvas:     #F8FAFC;
  --text-canvas-muted: #94A3B8;
  --border-canvas:  #334155;
}