/*
 * Crivo styles. Every file in this folder is loaded by stylesheet_link_tag :app, so there
 * are no @imports. Hand-written, no framework (docs/spec/06-ui-and-hotwire.md).
 *
 * The Crivo design system (tmp design handoff, 2026-09-26): warm paper greys, a pastel tone per
 * course, Newsreader for headings and grades, Figtree for text, JetBrains Mono for codes and
 * dates. What the AI produced is drawn dashed, like a draft; what a person verified is solid
 * and carries an ink stamp with their name and date. Light only; text keeps WCAG AA contrast.
 */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/assets/figtree-latin-wght-normal-7367b47d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/assets/figtree-latin-ext-wght-normal-803c13e2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/newsreader-latin-opsz-normal-4b499f36.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/newsreader-latin-ext-opsz-normal-53136885.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("/assets/newsreader-latin-opsz-italic-d2235591.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/assets/jetbrains-mono-latin-wght-normal-7c88d0cc.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/courier-prime-latin-700-normal-320ba1aa.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Paper */
  --color-bg: #f7f8f9;              /* page */
  --color-panel: #f0f1f3;           /* sidebar, header, quiet panels */
  --color-surface: #ffffff;         /* cards */
  --color-surface-muted: #f6f7f8;   /* table heads, insets */
  --color-soft: #f2f3f5;            /* answer boxes */
  --color-track: #eceef1;           /* progress tracks, row rules */
  --color-border: #e4e6e9;
  --color-border-strong: #dcdfe3;

  /* Ink */
  --color-text: #2a2833;            /* 14:1 on white */
  --color-body: #3b3946;
  --color-subtle: #57546a;
  --color-muted: #6b6878;           /* 5.3:1 on white */
  --color-faint: #9a96a6;           /* decoration only */

  /* Accent: stamp violet. Main buttons are dark ink; violet marks verification and the current place. */
  --color-accent: #5b3fc4;
  --color-accent-hover: #4a31ad;
  --color-accent-soft: #ebe6fb;
  --color-accent-text: #3d2f86;
  --color-accent-contrast: #ffffff;
  --color-link: #5a4ba8;
  --color-focus: #b9aef0;
  --color-ink: #2a2833;             /* primary buttons */
  --color-ink-hover: #3d3a4a;

  /* Who produced it: the AI (dashed draft), a TA, a professor */
  --ai-border: #b9aef0;  --ai-ring: #8f80de;  --ai-bg: #f7f5fe;  --ai-ink: #5a4ba8;
  --ta-color: #1f8a78;   --ta-border: #bfe2d6; --ta-bg: #eaf6f1;  --ta-ink: #1f6f60;
  --prof-color: #5b3fc4; --prof-border: #cdc3f5; --prof-bg: #efebfd; --prof-ink: #3d2f86;

  /* Pastel tones (courses, kinds, states): soft fill + readable ink */
  --lilac-soft: #ebe6fb;  --lilac-text: #5a4ba8;
  --sky-soft: #e1eefb;    --sky-text: #2f6397;
  --mint-soft: #dcf3e8;   --mint-text: #2d7658;
  --peach-soft: #fde6d8;  --peach-text: #a0532b;
  --lemon-soft: #fbf1c9;  --lemon-text: #86691a;
  --rose-soft: #fbe3ec;   --rose-text: #a3406a;
  --stone-soft: #eceef1;  --stone-text: #57546a;
  --mint-bar: #6fc6a0; --lemon-bar: #f3d96e; --peach-bar: #f4b89a;

  /* Semantic aliases used across components */
  --color-notice-bg: #e6f6ee;
  --color-notice-text: var(--mint-text);
  --color-alert-bg: var(--rose-soft);
  --color-alert-text: var(--rose-text);

  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-stamp: "Courier Prime", "Courier New", monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(42 40 51 / 0.04);
  --shadow-md: 0 1px 3px rgb(42 40 51 / 0.06), 0 8px 24px rgb(42 40 51 / 0.05);

  --max-width: 76rem;
  --sidebar-width: 232px;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--font-serif); font-weight: 500; line-height: 1.12; margin: 0 0 var(--space-3); color: var(--color-text); }
h1 { font-size: 2.5rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 650; line-height: 1.3; margin: 0 0 var(--space-3); }

p { margin: 0 0 var(--space-3); }

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-text); }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.875em; }

::selection { background: var(--color-accent-soft); }

/* Shared type roles */
.serif { font-family: var(--font-serif); font-weight: 500; }
.mono { font-family: var(--font-mono); }
.eyebrow { font: 500 0.75rem/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); margin: 0; }
.label-caps { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }