/* ==========================================================================
   Libri design tokens  —  tokens.css
   The ONLY place colours, fonts, sizes, spacing and radii are defined.
   Screens and components read these variables; nothing hard-codes a value.
   Brand: Libri blue and Libri red (from the logo), on a cool paper neutral.
   Layout concept: fixed 248px sidebar + 1440px desktop canvas, 12-col content.
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --brand-blue:        #1E4FD8;   /* Libri blue: primary actions, Tingkatan 4 */
  --brand-blue-strong: #1740B3;   /* hover / pressed */
  --brand-blue-soft:   #E8EEFD;   /* tinted fills */
  --brand-red:         #E23B4E;   /* Libri red: logo, Tingkatan 5 identity */
  --brand-red-soft:    #FDEBED;
  --brand-ink:         #0E1733;   /* wordmark and headings */

  /* ---- Neutrals (cool, biased toward the blue) ------------------------ */
  --bg:            #F4F6FB;   /* page ground */
  --surface:       #FFFFFF;   /* cards, panels */
  --surface-2:     #EEF1F8;   /* inset areas, skeletons */
  --surface-3:     #E3E8F3;
  --line:          #DCE2EE;   /* hairlines */
  --line-strong:   #C3CCDD;
  --fg:            #121A33;   /* body text */
  --fg-muted:      #3F4A63;   /* secondary text */
  --fg-subtle:     #5B6782;   /* captions, placeholders */
  --fg-on-brand:   #FFFFFF;

  /* ---- Semantic states (always paired with an icon and a word) ------- */
  --correct:        #15803D;
  --correct-soft:   #E6F4EA;
  --correct-line:   #9CD3AE;
  --incorrect:      #B42336;   /* deeper than brand red so the two never read as one */
  --incorrect-soft: #FBE9EB;
  --incorrect-line: #EDA7B0;
  --warning:        #A35F00;   /* text-safe amber */
  --warning-fill:   #F5B416;   /* Jalur Gemilang yellow, for fills and timer */
  --warning-soft:   #FEF4D8;
  --warning-line:   #F1D17A;
  --locked:         #7C879C;
  --locked-soft:    #EDEFF3;
  --info:           #1E4FD8;
  --info-soft:      #E8EEFD;

  /* ---- Chapter status (5 states) -------------------------------------- */
  --status-notstarted:       #7C879C;
  --status-notstarted-soft:  #EEF1F6;
  --status-developing:       #A35F00;
  --status-developing-soft:  #FEF4D8;
  --status-strong:           #1E4FD8;
  --status-strong-soft:      #E8EEFD;
  --status-retained:         #15803D;
  --status-retained-soft:    #E6F4EA;
  --status-refresh:          #6B5BB5;
  --status-refresh-soft:     #EFECFA;


  /* ---- Photos ------------------------------------------------------------ */
  --on-photo: #F4F6FB;                 /* caption text over a photo */
  --scrim:    rgba(8, 12, 28, 0.82);   /* caption gradient */

  /* ---- Typography ----------------------------------------------------- */
  --font-ui:      "Plus Jakarta Sans", "Noto Sans SC", "Noto Sans Tamil", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-exam:    "Source Serif 4", "Noto Serif", Georgia, "Times New Roman", serif;   /* question text: reads like the printed paper */
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* timers, references */

  --text-xs:   0.875rem;   /* 14 captions, chips (Round 2: was 12) */
  --text-sm:   0.9375rem;  /* 15 secondary (was 13) */
  --text-base: 1.0625rem;  /* 17 body (was 15) */
  --text-md:   1.1875rem;  /* 19 question stems, lead text (was 17) */
  --text-lg:   1.375rem;   /* 22 section headings (was 20) */
  --text-xl:   1.625rem;   /* 26 page headings */
  --text-2xl:  2.125rem;   /* 34 hero */
  --text-3xl:  2.75rem;    /* 44 display */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-heavy:   800;

  --leading-tight: 1.2;
  --leading-snug:  1.45;
  --leading-body:  1.65;
  --tracking-label: 0.06em;

  /* ---- Spacing (4px base) -------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(14, 23, 51, 0.06);
  --shadow-md: 0 2px 6px rgba(14, 23, 51, 0.06), 0 8px 24px rgba(14, 23, 51, 0.06);
  --focus-ring: 0 0 0 3px rgba(30, 79, 216, 0.35);

  /* ---- Layout ----------------------------------------------------------- */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --canvas-w: 1440px;
  --content-max: 1120px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* ---- Dark theme: same token names, dark values ------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-blue: #6C92FF; --brand-blue-strong: #8DABFF; --brand-blue-soft: #1B2647;
    --brand-red: #FF6B7C; --brand-red-soft: #3A1C24; --brand-ink: #EEF2FF;
    --bg: #0C1020; --surface: #141A2E; --surface-2: #1B2239; --surface-3: #242C46;
    --line: #2A3350; --line-strong: #3A4566;
    --fg: #E7EBF7; --fg-muted: #C3CADC; --fg-subtle: #A3ADC5; --fg-on-brand: #0C1020;
    --correct: #4ADE80; --correct-soft: #10291B; --correct-line: #1F6B3C;
    --incorrect: #FF8593; --incorrect-soft: #331820; --incorrect-line: #7A2E3A;
    --warning: #F8C44F; --warning-fill: #F5B416; --warning-soft: #33280E; --warning-line: #6B5313;
    --locked: #7C87A3; --locked-soft: #1B2239; --info: #6C92FF; --info-soft: #1B2647;
    --status-notstarted: #8E98B2; --status-notstarted-soft: #1B2239;
    --status-developing: #F8C44F; --status-developing-soft: #33280E;
    --status-strong: #6C92FF; --status-strong-soft: #1B2647;
    --status-retained: #4ADE80; --status-retained-soft: #10291B;
    --status-refresh: #B3A6F2; --status-refresh-soft: #251F42;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.35), 0 10px 28px rgba(0,0,0,0.3);
    --focus-ring: 0 0 0 3px rgba(108, 146, 255, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand-blue: #6C92FF; --brand-blue-strong: #8DABFF; --brand-blue-soft: #1B2647;
  --brand-red: #FF6B7C; --brand-red-soft: #3A1C24; --brand-ink: #EEF2FF;
  --bg: #0C1020; --surface: #141A2E; --surface-2: #1B2239; --surface-3: #242C46;
  --line: #2A3350; --line-strong: #3A4566;
  --fg: #E7EBF7; --fg-muted: #C3CADC; --fg-subtle: #A3ADC5; --fg-on-brand: #0C1020;
  --correct: #4ADE80; --correct-soft: #10291B; --correct-line: #1F6B3C;
  --incorrect: #FF8593; --incorrect-soft: #331820; --incorrect-line: #7A2E3A;
  --warning: #F8C44F; --warning-fill: #F5B416; --warning-soft: #33280E; --warning-line: #6B5313;
  --locked: #7C87A3; --locked-soft: #1B2239; --info: #6C92FF; --info-soft: #1B2647;
  --status-notstarted: #8E98B2; --status-notstarted-soft: #1B2239;
  --status-developing: #F8C44F; --status-developing-soft: #33280E;
  --status-strong: #6C92FF; --status-strong-soft: #1B2647;
  --status-retained: #4ADE80; --status-retained-soft: #10291B;
  --status-refresh: #B3A6F2; --status-refresh-soft: #251F42;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.35), 0 10px 28px rgba(0,0,0,0.3);
  --focus-ring: 0 0 0 3px rgba(108, 146, 255, 0.45);
  color-scheme: dark;
}