@layer tokens {

  /* OpenDyslexic (SIL Open Font License 1.1) — vendored locally rather than loaded from a
     CDN so the dyslexia-friendly font in the exam toolbar (#940) keeps working if a
     student's connection to a font CDN drops mid-exam. Only regular/bold weights are
     bundled; exam reading content doesn't use italics. */
  @font-face {
    font-display: swap;
    font-family: "OpenDyslexic";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/opendyslexic/OpenDyslexic-Regular-a262954a.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "OpenDyslexic";
    font-style: normal;
    font-weight: 700;
    src: url("/assets/opendyslexic/OpenDyslexic-Bold-65ac9559.woff2") format("woff2");
  }

  /* Primitive OKLCH values — L C H bare numbers.
     Primary: navy (#0B2138 ≈ OKLCH 0.24 0.05 252), matching the marketing site's ink
     Accent:  gold (#F2B43A ≈ OKLCH 0.81 0.15 80), matching the marketing site's gold */
  :root {
    --space-1: 0.125rem;
    --space-2: 0.25rem;
    --space-3: 0.375rem;
    --space-4: 0.5rem;
    --space-5: 0.625rem;
    --space-6: 0.75rem;
    --space-7: 0.875rem;
    --space-8: 1rem;
    --space-10: 1.25rem;
    --space-12: 1.5rem;

    --block-space: 1rem;
    --block-space-half: calc(var(--block-space) / 2);
    --block-space-double: calc(var(--block-space) * 2);
    --inline-space: 0.5rem;
    --inline-space-half: calc(var(--inline-space) / 2);
    --inline-space-double: calc(var(--inline-space) * 2);
    & {
      --oklch-primary:        0.24 0.05 252;
      --oklch-primary-light:  0.48 0.07 252;
      --oklch-primary-dark:   0.16 0.04 252;
      --oklch-accent:         0.81 0.15 80;
      --oklch-accent-light:   0.90 0.09 82;

      --oklch-ink-darkest:    0.18 0.02 220;
      --oklch-ink-dark:       0.32 0.02 220;
      --oklch-ink-mid:        0.52 0.02 220;
      --oklch-ink-light:      0.50 0.01 220;

      --oklch-canvas:         1.00 0    0;
      --oklch-canvas-raised:  0.97 0.01 220;
      --oklch-canvas-sunken:  0.94 0.01 220;

      --oklch-border:         0.88 0.01 220;
      --oklch-border-focus:   0.50 0.16 252;

      --oklch-danger:         0.55 0.22 27;
      --oklch-danger-surface: 0.96 0.04 27;
      --oklch-success:        0.58 0.18 142;
      --oklch-success-surface:0.96 0.04 142;
      --oklch-warning:        0.78 0.16 85;
    }
    & {
      --color-text:           oklch(var(--oklch-ink-darkest));
      --color-text-secondary: oklch(var(--oklch-ink-mid));
      --color-text-muted:     oklch(var(--oklch-ink-light));
      --color-text-on-primary:oklch(1 0 0);

      --color-bg:             oklch(var(--oklch-canvas));
      --color-surface:        oklch(var(--oklch-canvas-raised));
      --color-surface-raised: oklch(var(--oklch-canvas-raised));
      --color-surface-sunken: oklch(var(--oklch-canvas-sunken));

      --color-primary:        oklch(var(--oklch-primary));
      --color-navbar:         var(--color-primary);
      --color-primary-hover:  oklch(var(--oklch-primary-dark));
      --color-primary-tint:   oklch(var(--oklch-primary-light) / 0.15);
      --color-accent:         oklch(var(--oklch-accent));
      --color-accent-hover:   oklch(var(--oklch-accent-light));

      --color-border:         oklch(var(--oklch-border));
      --color-focus:          oklch(var(--oklch-border-focus));

      --color-danger:         oklch(var(--oklch-danger));
      --color-danger-surface: oklch(var(--oklch-danger-surface));
      --color-success:        oklch(var(--oklch-success));
      --color-success-surface:oklch(var(--oklch-success-surface));
      /* Text on the status surfaces; lighter than the button fills in dark mode */
      --color-success-text:   oklch(0.45 0.14 142);
      --color-danger-text:    var(--color-danger);
      --color-warning-surface:oklch(0.93 0.08 85);
      --color-warning-text:   oklch(0.45 0.16 85);

      --shadow-color:         oklch(0.20 0.02 220 / 0.08);
      --shadow-sm:            0 1px 2px var(--shadow-color);
      --shadow-md:            0 4px 8px var(--shadow-color);

      --font-sans:  "Inter", system-ui, sans-serif;
      --font-mono:  "JetBrains Mono", ui-monospace, monospace;
      /* Headings on the signed-out entry pages (login, signup), carrying the
         v3 landing's founder's-letter voice. Loaded only by the minimal layout. */
      --font-serif: "Newsreader", Georgia, "Times New Roman", serif;

      --radius-sm:    0.25rem;
      --radius-md:    0.5rem;
      --radius-lg:    1rem;
      --radius-full:  9999px;
      --spacing-page: 1.5rem;
      --max-width:    96rem;
      --max-width-wide: 120rem;

      --text-xs:   0.75rem;
      --text-sm:   0.875rem;
      --text-base: 1rem;

      /* Select chevron — defined as a token so dark theme can swap it */
      --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7e94' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

      color-scheme: light;
    }

    @media (max-width: 640px) { --spacing-page: 1rem; }
  }

  html[data-theme="dark"] {
    --oklch-ink-darkest:    0.96 0.01 220;
    --oklch-ink-dark:       0.85 0.01 220;
    --oklch-ink-mid:        0.70 0.01 220;
    --oklch-ink-light:      0.55 0.01 220;

    --oklch-canvas:         0.18 0.02 220;
    --oklch-canvas-raised:  0.22 0.02 220;
    --oklch-canvas-sunken:  0.15 0.02 220;

    --oklch-border:         0.30 0.02 220;
    --oklch-primary:        0.65 0.09 252;
    --oklch-primary-dark:   0.75 0.09 252;
    /* Navbar stays navy in dark mode; the light primary is for text and accents (#1289) */
    --color-navbar:         oklch(0.24 0.05 252);

    --oklch-success-surface:0.28 0.05 142;
    --oklch-danger-surface: 0.28 0.06 27;
    --color-success-text:   oklch(0.80 0.15 142);
    --color-danger-text:    oklch(0.78 0.13 27);
    --color-warning-surface:oklch(0.30 0.05 85);
    --color-warning-text:   oklch(0.85 0.12 85);

    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a0b4c8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
      --oklch-ink-darkest:    0.96 0.01 220;
      --oklch-ink-dark:       0.85 0.01 220;
      --oklch-ink-mid:        0.70 0.01 220;
      --oklch-ink-light:      0.55 0.01 220;

      --oklch-canvas:         0.18 0.02 220;
      --oklch-canvas-raised:  0.22 0.02 220;
      --oklch-canvas-sunken:  0.15 0.02 220;

      --oklch-border:         0.30 0.02 220;
      --oklch-primary:        0.65 0.09 252;
      --oklch-primary-dark:   0.75 0.09 252;
      --color-navbar:         oklch(0.24 0.05 252);

      --oklch-success-surface:0.28 0.05 142;
      --oklch-danger-surface: 0.28 0.06 27;
      --color-success-text:   oklch(0.80 0.15 142);
      --color-danger-text:    oklch(0.78 0.13 27);
      --color-warning-surface:oklch(0.30 0.05 85);
      --color-warning-text:   oklch(0.85 0.12 85);

      --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a0b4c8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

      color-scheme: dark;
    }
  }
}