/* ==========================================================================
   StudySpace — design tokens
   A dark, app-first system: deep navy canvas, raised charcoal cards, one
   confident violet accent, mint / amber / pink supporting colours, sans
   display type and compact, rounded surfaces. Pages and components only ever
   consume these variables.

   NOTE ON NAMES — the names are historical (this file once described a light
   "paper" theme). They are kept verbatim so every `var()` reference in the
   other stylesheets keeps resolving; only the values moved to dark.
   `--ink-900` is deliberately the violet action colour, because
   `.btn-primary`, focused chips and current-page controls are painted with it.
   ========================================================================== */

:root {
  /* ---- Accent: electric violet --------------------------------------- */
  --violet-900: #1c1c4d;
  --violet-800: #2b2b74;
  --violet-700: #4b4be8;
  --violet-600: #5b5bf6;
  --violet-500: #7c7cff;
  --violet-400: #a0a0ff;
  --violet-200: #2f2f5c;
  --violet-100: #20203c;
  --violet-50: #181829;

  /* ---- Secondary: warm amber, used for highlights only ---------------- */
  --amber-600: #ffb648;
  --amber-500: #ffc266;
  --amber-400: #ffd08a;
  --amber-100: #332815;

  /* ---- Ink: deep navy surfaces --------------------------------------- */
  --ink-950: #07070f;
  --ink-900: #5b5bf6; /* action colour — see note above */
  --ink-850: #0d0d17;
  --ink-800: #10101a;
  --ink-700: #4b4be8; /* primary button hover */
  --ink-600: #15151f;

  /* ---- Neutrals: cool greys ------------------------------------------ */
  --slate-700: #c8c8d8;
  --slate-600: #a2a2b8;
  --slate-500: #8b8ba3;
  --slate-400: #6f6f86;
  --slate-300: #45455a;
  --slate-200: #2b2b3a;
  --slate-100: #1e1e2a;
  --slate-50: #141420;

  --paper: #16161f;
  --canvas: #0b0b16;

  /* ---- Semantics ------------------------------------------------------ */
  --success-600: #34d399;
  --success-500: #2ee6a8;
  --success-100: #10281f;
  --danger-600: #ff6b76;
  --danger-500: #ff4d5a;
  --danger-100: #33141a;
  --info-500: #4d9cff;
  --info-100: #132038;
  /* Tints used for borders on soft state fills, and their text pairs. */
  --success-200: #1e4a3a;
  --danger-200: #5a222b;
  --info-200: #1f3a63;
  --amber-200: #5a4520;
  --amber-700: #f0a93c;
  --amber-800: #ffcf85;
  --amber-900: #ffe6b8;
  --danger-800: #ffb3b8;
  --info-800: #bcd8ff;

  --live: #ff4d5a;

  /* ---- Text ----------------------------------------------------------- */
  --text-strong: #ffffff;
  --text: #e8e8f2;
  --text-muted: #a2a2b8;
  --text-subtle: #8b8ba3;
  --text-invert: #ffffff;
  --text-invert-muted: rgba(255, 255, 255, 0.68);

  /* ---- Surfaces ------------------------------------------------------- */
  --surface: #16161f;
  --surface-raised: #1b1b26;
  --surface-sunken: #111119;
  --surface-inverse: #f4f4fb;
  /* Sits above the canvas: inputs, rails, quiet panels. */
  --surface-soft: #12121c;

  --border: #252532;
  --border-strong: #333346;
  /* Form controls are their own boundary: 3:1 against the card behind them
     (WCAG 1.4.11 non-text contrast). */
  --border-input: #63637e;
  --danger-solid: #c8263a;
  --danger-solid-hover: #a91f31;
  --amber-ink: #1a1200;
  --border-inverse: rgba(255, 255, 255, 0.1);

  /* ---- Gradients ------------------------------------------------------ */
  --grad-brand: linear-gradient(135deg, #6d6dff 0%, #4b4be8 100%);
  --grad-ink: linear-gradient(160deg, #16161f 0%, #0d0d17 100%);
  --grad-amber: linear-gradient(135deg, #ffc266 0%, #ffb648 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  /* Hero wash used behind the welcome banner. */
  --grad-hero: linear-gradient(115deg, #241f5c 0%, #191937 45%, #101020 100%);
  /* Pastel header bands for batch cards, one per subject — the signature
     surface of the reference: light panel, dark ink, abstract mentor chips. */
  --band-physics: linear-gradient(135deg, #b8b2fb 0%, #9a93f2 100%);
  --band-chemistry: linear-gradient(135deg, #a6e3c4 0%, #86d3ae 100%);
  --band-maths: linear-gradient(135deg, #a9d8f5 0%, #88c4ea 100%);
  --band-biology: linear-gradient(135deg, #f3b3c6 0%, #e894ac 100%);
  --band-reasoning: linear-gradient(135deg, #f4dd9c 0%, #e9c974 100%);
  --band-english: linear-gradient(135deg, #d3bdf7 0%, #b79ef0 100%);
  --band-computer: linear-gradient(135deg, #a3ddd6 0%, #82c9c1 100%);
  /* Question-palette statuses: pastel fills carrying dark ink, exactly like the
     coloured status squares in an exam interface. */
  --pal-answered: #3ddc97;
  --pal-not-answered: #ff8a8a;
  --pal-marked: #b79dff;
  --pal-ink: #14141f;
  --band-default: linear-gradient(135deg, #c3c3d4 0%, #a8a8bd 100%);
  /* Text and mentor chips printed on a pastel band. */
  --band-ink: #14141f;
  --band-ink-muted: rgba(20, 20, 31, 0.66);
  --band-chip: rgba(255, 255, 255, 0.55);

  --grad-page-head: linear-gradient(180deg, #14142a 0%, #0b0b16 100%);
  --grad-course: linear-gradient(160deg, #1a1740 0%, #0e0e1c 62%, #0b0b16 100%);
  --grad-auth: linear-gradient(155deg, #241f5c 0%, #12102a 55%, #0b0b16 100%);
  /* Stage, splash and avatar surfaces used by the app screens. */
  --grad-splash: radial-gradient(90% 70% at 50% 0%, #26205e 0%, #12102a 45%, #0a0a14 100%);
  --grad-stage: linear-gradient(150deg, #241f52 0%, #16132c 100%);
  --grad-stage-live: linear-gradient(150deg, #2c1a2a 0%, #17131f 100%);
  --grad-player: linear-gradient(160deg, #1d1a3d 0%, #0e0d1c 100%);
  --grad-avatar: linear-gradient(135deg, #d5ceff 0%, #a9a2f4 100%);
  --grad-avatar-soft: linear-gradient(135deg, #ded8ff 0%, #a9a2f4 100%);
  --poster-ink: #0d0b1d;

  /* Toast glyph colours, kept bright for a 3:1 icon contrast on --ink. */
  --toast-success: #4ade80;
  --toast-error: #f87171;
  /* Hero panel: navy card with the violet bloom behind the artwork. */
  --grad-hero-panel: radial-gradient(120% 140% at 82% 30%, rgba(120, 96, 255, 0.55) 0%, rgba(64, 44, 160, 0.34) 38%, rgba(16, 16, 32, 0) 72%),
    linear-gradient(120deg, #1b1642 0%, #15102f 52%, #0f0d22 100%);

  /* ---- Type ----------------------------------------------------------- */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.0625rem;    /* 17px */
  --text-lg: 1.1875rem;    /* 19px */
  --text-xl: 1.4375rem;    /* 23px */
  --text-2xl: 1.875rem;    /* 30px */
  --text-3xl: 2.375rem;    /* 38px */
  --text-4xl: 2.875rem;    /* 46px */
  --text-5xl: 3.5rem;      /* 56px */

  --leading-tight: 1.18;
  --leading-snug: 1.45;
  --leading-normal: 1.7;

  --tracking-tight: -0.015em;
  --tracking-wide: 0.09em;

  /* ---- Space ---------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-10: 4rem;
  --sp-11: 5.5rem;

  /* ---- Radius: soft, app-like ---------------------------------------- */
  --r-xs: 7px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 17px;
  --r-xl: 21px;
  --r-2xl: 26px;
  --r-3xl: 30px;
  --r-pill: 999px;

  /* ---- Elevation: soft black drop shadows ----------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.6);
  --shadow-brand: 0 10px 28px rgba(91, 91, 246, 0.35);
  --shadow-amber: 0 10px 28px rgba(255, 182, 72, 0.22);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 340ms;

  /* ---- Layout --------------------------------------------------------- */
  --container: 1080px;
  --container-wide: 1240px;
  --header-h: 64px;
  --tabbar-h: 62px;
  --sidebar-w: 232px;
  --topbar-h: 68px;

  --z-sticky: 40;
  --z-header: 50;
  --z-overlay: 80;
  --z-toast: 90;
}

/* ---- Paper theme: the test window ------------------------------------
   The exam page is read like a printed paper, so it flips the semantic
   tokens to a light surface. Scoped to body.exam-shell — the class the test
   page sets — so no other screen is touched. */
body.exam-shell {
  --canvas: #eef1f7;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f7f9fc;
  --surface-sunken: #f1f4f9;
  --surface-soft: #f8fafc;
  --surface-inverse: #101827;

  --text-strong: #0d1526;
  --text: #1b2434;
  --text-muted: #4a5568;
  --text-subtle: #5b6577;

  --border: #e2e7f0;
  --border-strong: #cbd3e1;
  --border-input: #737e93;

  --success-500: #0f7a4d;
  --success-600: #0b6a42;
  --success-100: #e6f6ee;
  --danger-500: #c0263a;
  --danger-600: #a91f31;
  --danger-100: #fdecef;
  --amber-500: #92590a;
  --live: #c0263a;

  /* Question-palette statuses on white: saturated fills, white numerals,
     and an outline for the untouched questions. */
  --pal-answered: #15803d;
  --pal-answered-ink: #ffffff;
  --pal-marked: #6d28d9;
  --pal-marked-ink: #ffffff;
  --pal-not-answered: #b91c1c;
  --pal-not-answered-ink: #ffffff;
  --pal-unvisited: #ffffff;
  --pal-unvisited-ink: #333c4e;
  --pal-unvisited-edge: #c5cddb;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}