/* =====================================================================
   Design tokens
   ---------------------------------------------------------------------
   Every colour, space and radius used anywhere in the product is declared
   here once. Themes work by redefining the same token names, so no
   component ever needs a theme-specific rule.

   Theme resolution (three states):
     :root                             -> light palette (the base)
     @media (prefers-color-scheme:dark) -> dark, unless data-theme="light"
     [data-theme="dark"]               -> dark, overriding the OS
     [data-theme="contrast"]           -> high-contrast accessibility theme
   ===================================================================== */

:root {
  /* ---- brand ---- */
  --brand-50:  #eef4ff;
  --brand-100: #dbe6fe;
  --brand-200: #bfd3fe;
  --brand-300: #93b4fd;
  --brand-400: #608cfa;
  --brand-500: #3b66f6;
  --brand-600: #2547eb;
  --brand-700: #1d35d8;
  --brand-800: #1e2faf;
  --brand-900: #1e2d8a;

  /* ---- semantic palette ---- */
  --success-bg:  #ecfdf5;  --success-fg:  #047857;  --success-br:  #a7f3d0;  --success:  #10b981;
  --warning-bg:  #fffbeb;  --warning-fg:  #b45309;  --warning-br:  #fde68a;  --warning:  #f59e0b;
  --danger-bg:   #fef2f2;  --danger-fg:   #b91c1c;  --danger-br:   #fecaca;  --danger:   #ef4444;
  --info-bg:     #eff6ff;  --info-fg:     #1d4ed8;  --info-br:     #bfdbfe;  --info:     #3b82f6;
  --neutral-bg:  #f4f5f7;  --neutral-fg:  #4b5563;  --neutral-br:  #e2e5ea;

  /* ---- surfaces & text ---- */
  --bg:            #f6f7f9;
  --bg-subtle:     #eef0f4;
  --surface:       #ffffff;
  --surface-2:     #fafbfc;
  --surface-3:     #f2f4f7;
  --surface-inset: #f8f9fb;
  --overlay:       rgba(15, 23, 42, 0.45);

  --text:          #111827;
  --text-muted:    #5b6472;
  --text-subtle:   #808a99;
  --text-inverse:  #ffffff;

  --border:        #e3e6eb;
  --border-strong: #ccd2db;
  --border-focus:  var(--brand-500);

  /* ---- data-visualisation series ----
     Ordered for maximum adjacent contrast and distinguishable in the
     common forms of colour-vision deficiency. */
  --series-1: #3b66f6;
  --series-2: #14b8a6;
  --series-3: #f59e0b;
  --series-4: #a855f7;
  --series-5: #ef4444;
  --series-6: #0891b2;
  --series-7: #84cc16;
  --series-8: #ec4899;

  /* ---- answer-state colours (test palette) ---- */
  --state-answered:   #16a34a;
  --state-unanswered: #dc2626;
  --state-marked:     #d97706;
  --state-both:       #7c3aed;
  --state-unvisited:  #cbd2dc;

  /* ---- typography ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Root size is scaled by the user's font-size preference; every other
     size is relative to it, so one control resizes the whole product. */
  --font-scale: 1;
  --fs-xs:   calc(0.75rem  * var(--font-scale));
  --fs-sm:   calc(0.8125rem * var(--font-scale));
  --fs-base: calc(0.9375rem * var(--font-scale));
  --fs-md:   calc(1rem      * var(--font-scale));
  --fs-lg:   calc(1.125rem  * var(--font-scale));
  --fs-xl:   calc(1.375rem  * var(--font-scale));
  --fs-2xl:  calc(1.75rem   * var(--font-scale));
  --fs-3xl:  calc(2.25rem   * var(--font-scale));

  --lh-tight: 1.25;
  --lh-base:  1.55;
  --lh-loose: 1.75;

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

  /* ---- radii ---- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

  /* ---- elevation ---- */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --sh-md: 0 4px 10px -2px rgba(16, 24, 40, 0.08), 0 2px 6px -2px rgba(16, 24, 40, 0.05);
  --sh-lg: 0 12px 26px -6px rgba(16, 24, 40, 0.12), 0 4px 10px -4px rgba(16, 24, 40, 0.06);
  --sh-xl: 0 24px 48px -12px rgba(16, 24, 40, 0.22);

  /* ---- layout ---- */
  --sidebar-w:          252px;
  --sidebar-w-collapsed: 68px;
  --topbar-h:           60px;
  --container:          1320px;
  --container-narrow:   760px;

  --t-fast: 120ms;
  --t-base: 180ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Dark: follows the OS unless the user pinned light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="contrast"]) {
    --bg:            #0d1117;
    --bg-subtle:     #0a0e14;
    --surface:       #161b23;
    --surface-2:     #1c222c;
    --surface-3:     #232a35;
    --surface-inset: #12171e;
    --overlay:       rgba(0, 0, 0, 0.65);

    --text:         #e6e9ef;
    --text-muted:   #9aa4b2;
    --text-subtle:  #6f7a89;
    --text-inverse: #0d1117;

    --border:        #262d38;
    --border-strong: #38404d;

    --success-bg: #052e21; --success-fg: #4ade80; --success-br: #14532d;
    --warning-bg: #2e1f05; --warning-fg: #fbbf24; --warning-br: #78350f;
    --danger-bg:  #300f0f; --danger-fg:  #f87171; --danger-br:  #7f1d1d;
    --info-bg:    #0b1f3f; --info-fg:    #7cb0ff; --info-br:    #1e3a8a;
    --neutral-bg: #1c222c; --neutral-fg: #9aa4b2; --neutral-br: #2c333f;

    --series-1: #6b8ffb; --series-2: #2dd4bf; --series-3: #fbbf24; --series-4: #c084fc;
    --series-5: #f87171; --series-6: #22d3ee; --series-7: #a3e635; --series-8: #f472b6;

    --state-unvisited: #39414e;

    --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --sh-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --sh-lg: 0 14px 30px rgba(0, 0, 0, 0.55);
    --sh-xl: 0 24px 48px rgba(0, 0, 0, 0.65);
  }
}

/* ---------- Dark: explicitly chosen, wins over the OS ---------- */
:root[data-theme="dark"] {
  --bg:            #0d1117;
  --bg-subtle:     #0a0e14;
  --surface:       #161b23;
  --surface-2:     #1c222c;
  --surface-3:     #232a35;
  --surface-inset: #12171e;
  --overlay:       rgba(0, 0, 0, 0.65);

  --text:         #e6e9ef;
  --text-muted:   #9aa4b2;
  --text-subtle:  #6f7a89;
  --text-inverse: #0d1117;

  --border:        #262d38;
  --border-strong: #38404d;

  --success-bg: #052e21; --success-fg: #4ade80; --success-br: #14532d;
  --warning-bg: #2e1f05; --warning-fg: #fbbf24; --warning-br: #78350f;
  --danger-bg:  #300f0f; --danger-fg:  #f87171; --danger-br:  #7f1d1d;
  --info-bg:    #0b1f3f; --info-fg:    #7cb0ff; --info-br:    #1e3a8a;
  --neutral-bg: #1c222c; --neutral-fg: #9aa4b2; --neutral-br: #2c333f;

  --series-1: #6b8ffb; --series-2: #2dd4bf; --series-3: #fbbf24; --series-4: #c084fc;
  --series-5: #f87171; --series-6: #22d3ee; --series-7: #a3e635; --series-8: #f472b6;

  --state-unvisited: #39414e;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --sh-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --sh-lg: 0 14px 30px rgba(0, 0, 0, 0.55);
  --sh-xl: 0 24px 48px rgba(0, 0, 0, 0.65);
}

/* ---------- High contrast: for low-vision users ---------- */
:root[data-theme="contrast"] {
  --bg:        #000000;
  --bg-subtle: #000000;
  --surface:   #000000;
  --surface-2: #0a0a0a;
  --surface-3: #141414;
  --surface-inset: #0a0a0a;

  --text:        #ffffff;
  --text-muted:  #e8e8e8;
  --text-subtle: #d0d0d0;

  --border:        #ffffff;
  --border-strong: #ffffff;

  --brand-500: #4da3ff; --brand-600: #4da3ff; --brand-700: #79bbff;

  --success-bg: #000; --success-fg: #4ef08a; --success-br: #4ef08a; --success: #4ef08a;
  --warning-bg: #000; --warning-fg: #ffd24d; --warning-br: #ffd24d; --warning: #ffd24d;
  --danger-bg:  #000; --danger-fg:  #ff8080; --danger-br:  #ff8080; --danger:  #ff8080;
  --info-bg:    #000; --info-fg:    #7cc4ff; --info-br:    #7cc4ff; --info:    #7cc4ff;
  --neutral-bg: #000; --neutral-fg: #ffffff; --neutral-br: #ffffff;

  --state-unvisited: #8a8a8a;

  --sh-xs: none; --sh-sm: none; --sh-md: none; --sh-lg: none; --sh-xl: none;
}