/* ============================================================================
   Odvanta — Design Tokens  ·  the single source of truth
   Light is canonical; dark is a secondary theme (.dark on <html> or <body>).
   Everything in the product references these — never hard-code a hex, size,
   space, radius, or timing in a component. Change a value here, the app follows.
   ========================================================================= */

:root {

  /* ---------- COLOUR · brand primitives -------------------------------- */
  --pe-paper:    #FBF8F2;   /* warm off-white */
  --pe-ink:      #1A1A1A;   /* warm near-black */
  --pe-crimson:  #C0362C;   /* the accent / red pen */
  --pe-coral:    #E8704A;   /* crimson's bright twin (for ink backgrounds) */

  /* warm neutral (stone) scale */
  --pe-stone-50:  #F7F4ED;
  --pe-stone-100: #F2EEE6;
  --pe-stone-200: #E8E1D4;
  --pe-stone-300: #D8CFBE;
  --pe-stone-400: #A8A090;
  --pe-stone-500: #8A8276;
  --pe-stone-600: #6E675C;
  --pe-stone-700: #4A463E;

  /* semantic */
  --pe-correct:      #237A52;  --pe-correct-soft:   #E7F2EB;
  --pe-incorrect:    #C0362C;  --pe-incorrect-soft: #FBEDEB;  /* the red pen */
  --pe-caution:      #B8791F;  --pe-caution-soft:   #FAF0DD;
  --pe-lucky:        #B8791F;  /* the guessed-right "silent mistake" */

  /* section accents (muted, paper-friendly) */
  --pe-varc: #9C4A6B;  --pe-varc-soft: #F6EBF0;
  --pe-dilr: #B5702E;  --pe-dilr-soft: #F8EFE2;
  --pe-qa:   #3A6B8C;  --pe-qa-soft:   #EAF1F6;

  /* ---------- COLOUR · functional roles (what UI references) ----------- */
  --bg:              var(--pe-paper);
  --surface:         #FFFFFF;
  --surface-sunken:  var(--pe-stone-100);
  --rule:            var(--pe-stone-200);   /* hairline border — the workhorse */
  --rule-strong:     var(--pe-stone-300);
  --text:            var(--pe-ink);
  --text-secondary:  var(--pe-stone-600);
  --text-tertiary:   #716A5F;   /* AA on paper (5.0:1) — was stone-500, failed at 3.6:1 */
  --text-faint:      #776F62;   /* AA on paper (4.7:1) — was stone-400, failed at 2.4:1 */
  --accent:          var(--pe-crimson);
  --accent-hover:    #A92E25;   /* darker crimson for CTA hover */
  --accent-contrast: #FFFFFF;
  --focus-ring:      var(--pe-crimson);

  /* ---------- TYPE ----------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  --t-display:   48px;   /* wordmark / hero */
  --t-h1:        34px;   /* page title (serif) */
  --t-h2:        24px;   /* section (serif) */
  --t-h3:        19px;   /* sub-section (serif) */
  --t-body:      16px;   /* body / options (sans) */
  --t-secondary: 14px;   /* supporting (sans) */
  --t-caption:   12.5px; /* hint / metadata (sans) */
  --t-kicker:    11px;   /* masthead label (sans, small-caps) */

  --w-regular: 400;  --w-medium: 500;  --w-display: 600;  /* two weights per family */

  --lh-tight:   1.15;  --lh-heading: 1.25;  --lh-body: 1.6;  --lh-relaxed: 1.75;
  --track-kicker: 0.2em;  --track-tight: -0.015em;

  /* ---------- SPACE · 4pt rhythm --------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px; --sp-7: 40px; --sp-8: 64px;  --sp-9: 96px;

  /* ---------- RADIUS --------------------------------------------------- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-pill: 999px;

  /* ---------- ELEVATION · editorial = minimal -------------------------- */
  /* Prefer --rule (hairline) over shadow. Shadows are rare and quiet.      */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(26, 26, 26, .05);    /* resting card (light only) */
  --elev-2: 0 4px 16px rgba(26, 26, 26, .08);   /* lifted: menus, dialogs    */

  /* ---------- MOTION · calm, never flashy ------------------------------ */
  --ease: cubic-bezier(.2, .6, .2, 1);          /* calm ease-out */
  --dur-hover:     100ms;
  --dur-accordion: 180ms;
  --dur-reveal:    200ms;
  --dur-panel:     250ms;

  /* ---------- LAYOUT --------------------------------------------------- */
  --content-max: 1240px;   /* app shell max width */
  --reading-max: 680px;    /* prose / explanation reading measure */
  --gutter:      24px;
  --rail:        240px;    /* question palette / sidebar */
}

/* ============================================================================
   DARK · secondary theme. Warm-inverted, not cold. Crimson → coral on ink.
   ========================================================================= */
.dark {
  --bg:             #15140F;
  --surface:        #1E1C17;
  --surface-sunken: #252219;
  --rule:           #34302A;
  --rule-strong:    #45403A;
  --text:           #F4F0E8;
  --text-secondary: #B8B0A2;
  --text-tertiary:  #9A9184;   /* AA on ink (5.9:1) */
  --text-faint:     #8A8276;   /* AA on ink (4.9:1) */
  --accent:         var(--pe-coral);
  --accent-hover:   #D1583C;   /* darker coral for CTA hover on ink */

  --pe-correct:        #4FB07E;  --pe-correct-soft:   #16291F;
  --pe-incorrect-soft: #3A201D;
  --pe-caution-soft:   #2E2410;
  --pe-varc-soft: #2E1F27;  --pe-dilr-soft: #2E2316;  --pe-qa-soft: #16242E;

  --elev-1: none;  /* on ink, use --rule instead of shadow */
}

/* ============================================================================
   GLOBAL ACCESSIBILITY BASE  ·  loaded on every screen (tokens.css is universal)
   Keyboard focus and reduced-motion, defined once so no screen can omit them.
   ========================================================================= */

/* Visible keyboard focus on every interactive element (mouse clicks stay clean
   via :focus-visible). Uses --focus-ring; never remove without a replacement. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="switch"]:focus-visible,
[role="radio"]:focus-visible,
[role="tab"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Honour the OS "reduce motion" setting: near-instant, no large movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}