/* Poppins (SIL Open Font License, see /app/brand/fonts/OFL.txt) matches the logo wordmark; it sets headings only. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/app/brand/fonts/poppins-medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/app/brand/fonts/poppins-semibold.woff2") format("woff2"); }

/*
 * Design tokens.
 * This is the single source of truth for colour, space, type, radius and motion.
 * The landing page and the product both read these.
 * Rule: nothing outside this file declares a raw hex, px size or font stack.
 * Add a token here with a stated second use, or compose from what exists.
 */

:root {
  /* ---- Colour primitives. ---- */
  /* Neutrals are cool-leaning so code blocks sit calmly next to prose. */
  --ink-950: #0b1220;
  --ink-900: #111827;
  --ink-800: #1f2937;
  --ink-700: #374151;
  --ink-600: #4b5563;
  --ink-500: #6b7280;
  --ink-400: #9ca3af;
  --ink-300: #d1d5db;
  --ink-200: #e5e7eb;
  --ink-100: #f3f4f6;
  --ink-050: #f9fafb;
  --white: #ffffff;

  /* Teal is the accent rather than the default product blue. */
  /* It reads technical without reading generic, and it holds contrast on both surfaces. */
  --teal-900: #134e4a;
  --teal-800: #115e59;
  --teal-700: #0f766e;
  --teal-600: #0d9488;
  --teal-400: #2dd4bf;
  --teal-200: #99f6e4;
  --teal-100: #ccfbf1;
  --teal-050: #f0fdfa;

  /* Amber carries earned progress: XP, streak, daily goal. */
  /* It is never used for warnings, so progress and problems never look alike. */
  --amber-800: #92400e;
  --amber-700: #b45309;
  --amber-300: #fcd34d;
  --amber-100: #fef3c7;

  /* Green carries done work, such as the ok status. */
  --green-800: #166534;
  --green-700: #15803d;
  --green-400: #4ade80;
  --green-300: #86efac;
  --green-200: #bbf7d0;
  --green-100: #dcfce7;

  --rose-800: #9f1239;
  --rose-700: #be123c;
  --rose-300: #fda4af;
  --rose-100: #ffe4e6;

  /* ---- Semantic colour. ---- */
  /* Components only ever reference these, never the primitives above. */
  --surface-page: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--ink-050);
  --surface-inverse: var(--ink-950);
  --surface-accent-quiet: var(--teal-050);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-quiet: var(--ink-500);
  --text-inverse: var(--white);
  --text-inverse-secondary: var(--ink-300);
  --text-accent: var(--teal-800);
  --text-on-accent: var(--white);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  /*
   * The boundary of anything interactive: an input, a secondary button, a checkbox.
   * WCAG 1.4.11 wants 3:1 for these, which --border-strong does not reach on white.
   * Separating them means a decorative divider can stay quiet without dragging controls with it.
   */
  --border-control: var(--ink-500);
  --border-accent: var(--teal-600);
  --border-inverse: var(--ink-800);

  --accent: var(--teal-700);
  --accent-hover: var(--teal-800);
  --accent-active: var(--teal-900);

  --focus-ring: var(--teal-600);
  --focus-ring-inverse: var(--teal-400);

  --status-ok-text: var(--green-800);
  --status-ok-surface: var(--green-100);
  --status-warn-text: var(--amber-800);
  --status-warn-surface: var(--amber-100);
  --status-error-text: var(--rose-800);
  --status-error-surface: var(--rose-100);

  --progress-earned: var(--amber-700);
  --progress-track: var(--ink-200);

  /* The code editor is dark in every theme, so these tokens never change with the colour scheme. */
  /* Syntax stays inside the palette: teal for keywords and literals, pale green for callables, green for strings, ink for the rest. */
  --code-bg: var(--ink-950);
  --code-bar: var(--ink-900);
  --code-text: var(--ink-200);
  --code-dim: var(--ink-400);
  --code-caret: var(--white);
  --code-selection: var(--teal-900);
  /* Syntax colours follow VS Code's Dark+ theme, which most developers already read fluently. */
  /* They are the one place outside the ink, teal, green and error-red palette. */
  --code-keyword: #569cd6;
  --code-constant: #569cd6;
  --code-number: #b5cea8;
  --code-builtin: #4ec9b0;
  --code-function: #dcdcaa;
  --code-string: #ce9178;
  --code-comment: #6a9955;

  /* ---- Space. ---- */
  /* A 4px base scale. */
  /* Every margin, padding and gap comes from here so nothing floats. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Type. ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* Maths gets a serif stack so an inline symbol is distinguishable from prose. */
  /* Marcus owns the actual maths rendering; this token is the hook he binds to. */
  --font-math: "Latin Modern Math", "STIX Two Math", Cambria, "Times New Roman", serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  /* The display size is fluid so the hero does not need a breakpoint of its own. */
  --text-display: clamp(2.125rem, 1.5rem + 2.4vw, 3rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* ---- Radius. ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 999px;

  /* ---- Elevation. ---- */
  --shadow-1: 0 1px 2px rgb(11 18 32 / 0.06), 0 1px 3px rgb(11 18 32 / 0.08);
  --shadow-2: 0 4px 12px rgb(11 18 32 / 0.08), 0 12px 28px rgb(11 18 32 / 0.08);

  /* ---- Motion. ---- */
  /* Durations are short by default because the session UI must not feel animated. */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Layout. ---- */
  /* Shared node geometry for the frontier and complete prerequisite graph. */
  --lesson-node-inline: 15rem;
  --lesson-node-block: 8rem;
  --container: 68rem;
  --container-narrow: 34rem;
  /* Prose never exceeds this measure, whatever the container does. */
  --measure: 66ch;
  /* The minimum comfortable hit target, applied to every interactive control. */
  --target-min: 2.75rem;
}

/*
 * Dark is a token remap, not a second stylesheet.
 * Primitives stay fixed; only the semantic layer moves.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: var(--ink-950);
    --surface-raised: var(--ink-900);
    --surface-sunken: var(--ink-900);
    --surface-inverse: var(--ink-100);
    --surface-accent-quiet: #0d2b2a;

    --text-primary: var(--ink-050);
    --text-secondary: var(--ink-300);
    --text-quiet: var(--ink-400);
    --text-inverse: var(--ink-950);
    --text-inverse-secondary: var(--ink-700);
    --text-accent: var(--teal-200);
    --text-on-accent: var(--ink-950);

    --border-subtle: var(--ink-800);
    --border-strong: var(--ink-700);
    --border-control: var(--ink-500);
    --border-accent: var(--teal-400);
    --border-inverse: var(--ink-300);

    --accent: var(--teal-400);
    --accent-hover: var(--teal-200);
    --accent-active: var(--white);

    --focus-ring: var(--teal-400);
    --focus-ring-inverse: var(--teal-700);

    --status-ok-text: var(--green-300);
    --status-ok-surface: #0f2a18;
    --status-warn-text: var(--amber-300);
    --status-warn-surface: #2e2008;
    --status-error-text: var(--rose-300);
    --status-error-surface: #3b0d1b;

    --progress-earned: var(--amber-300);
    --progress-track: var(--ink-800);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5), 0 12px 28px rgb(0 0 0 / 0.4);
  }
}

/* Nora's study-workspace tokens, scoped away from the public landing page.
   Control radius is shared by fields/buttons; detail width by graph layouts. */
:root:has(.app-layout) {
  color-scheme: light;
  --surface-inverse: var(--ink-950);
  --text-inverse: var(--white);
  --text-inverse-secondary: var(--ink-300);
  --border-inverse: var(--ink-800);
  /* The app keeps to the ink, teal and green scales, so a warning is ink. */
  --status-warn-text: var(--ink-900);
  --status-warn-surface: var(--ink-100);
  --surface-page: var(--ink-050);
  --surface-raised: var(--white);
  --surface-sunken: var(--ink-050);
  --surface-accent-quiet: var(--teal-050);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-quiet: var(--ink-500);
  --text-accent: var(--teal-800);
  --text-on-accent: var(--white);
  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-control: var(--ink-500);
  --border-accent: var(--teal-700);
  --accent: var(--teal-700);
  --accent-hover: var(--teal-800);
  --accent-active: var(--teal-900);
  --focus-ring: var(--teal-700);
  --status-ok-text: var(--green-800);
  --status-ok-surface: var(--green-100);
  /* A wrong answer or an error is red, the one hue the app adds to ink, teal and green. */
  --status-error-text: var(--rose-800);
  --status-error-surface: var(--rose-100);
  --progress-earned: var(--teal-700);
  --progress-track: var(--ink-200);
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 0;
  --radius-control: 0;
  --text-heading-mobile: 1.5rem;
  --shadow-1: none;
  --shadow-2: none;
  --weight-bold: 600;
  --weight-medium: 600;
  --measure: 68ch;
}