/**
 * @file tokens.css
 * @description UPKK Interactive Question Bank Design Tokens (v2.3.6).
 * Direction: "Tactile KAFA Flashcard & Exam Slip"
 * Zero resting box-shadows, zero gradients, WCAG 2.1 AA high-contrast tokens.
 */

:root {
  /* 1. Surface & Ground Tokens */
  --bg-page: #F7F6F2;           /* Warm Matte Exam Paper */
  --bg-surface: #FFFFFF;        /* Pure Crisp Sheet */
  --bg-subtle: #EFECE6;         /* Recessed Stone / Scenario Box */
  --bg-emerald-subtle: #E6F4EE; /* Active / Selected Emerald Tint */

  /* 2. Typography & Ink Tokens (WCAG AA Audited on #F7F6F2 & #FFFFFF) */
  --ink-primary: #11221A;       /* Deep Slate-Forest Ink (15.4:1) */
  --ink-secondary: #2C3E35;     /* Secondary Body Ink (10.4:1) */
  --ink-muted: #4A5D52;         /* Muted Caption Ink (6.48:1) */
  --ink-on-brand: #FFFFFF;      /* Pure White on Deep Emerald */

  /* 3. Brand & Action Emerald Tokens */
  --brand-deep: #064E3B;        /* Official Stamp & Header Emerald */
  --brand-primary: #047857;     /* Primary Action Button Emerald */
  --brand-hover: #065F46;       /* Hover / Active State Emerald */

  /* 4. Semantic Assessment Feedback Tokens */
  --correct-bg: #D1FAE5;
  --correct-border: #059669;
  --correct-ink: #065F46;

  --wrong-bg: #FEE2E2;
  --wrong-border: #DC2626;
  --wrong-ink: #991B1B;

  --amber-bg: #FBF3DB;
  --amber-pill: #FEF3C7;
  --amber-border: #D97706;
  --amber-ink: #78350F;         /* 8.80:1 contrast on #FEF3C7 */

  --info-bg: #DBEAFE;
  --info-border: #2563EB;
  --info-ink: #1E40AF;

  /* 5. Structural Rule & Hairline Tokens */
  --border-hairline: #CFC9BC;   /* 1px Structural Rule */
  --border-muted: #E2DDD3;      /* Soft Divider */
  --border-strong: #11221A;     /* High-Contrast Active Rule */

  /* 6. Shape & Corner Radii (Persona-Differentiated) */
  --radius-exam: 4px;           /* Official Exam & Slip Surfaces */
  --radius-btn: 6px;            /* Tactile Buttons & Inputs */
  --radius-card: 8px;           /* Friendly Student Study Cards */

  /* 7. Typography Stack & Scale */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* 8. Touch Target Minimums */
  --touch-min: 48px;
}