/* ==========================================================================
   Design tokens - the single source of truth for the visual language.
   Every colour, surface, space, radius, shadow, type size, control height and
   motion curve in the app resolves here. Components never invent values.
   ========================================================================== */

/*
 * Inter 4 (SIL Open Font License, see assets/fonts/OFL.txt), vendored so the
 * workspace renders identically on every platform and never requests a font
 * from a third party. The optical-size axis gives large figures the tighter
 * display cut automatically.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin.woff2") format("woff2-variations"),
    url("../fonts/inter-latin.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: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2-variations"),
    url("../fonts/inter-latin-ext.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;
}

:root {
  /* --- Surfaces: a cool canvas with layered working planes ------------- */
  --c-white: #ffffff;
  --c-canvas: #f3f3f2; /* level 0: the desk the workspace sits on */
  --c-surface: #ffffff; /* level 1: the workspace */
  --c-surface-2: #fafafa; /* level 2: inspector and recessed regions */
  --c-surface-3: #f2f2f3; /* wells, hover fills */
  --c-rail: #f3f3f2;
  --c-paper: var(--c-canvas);
  --c-paper-2: var(--c-surface-3);

  /* --- Lines: separation comes from hairlines, not shadows ------------- */
  --c-line: #e4e4e7;
  --c-line-soft: #efeff1;
  --c-line-strong: #d4d4d8;

  /* --- Ink: deep navy-black, never pure black --------------------------- */
  --c-ink-900: #0e121b;
  --c-ink-800: #1b202c;
  --c-ink-700: #343946;
  --c-ink-600: #4f5563;
  --c-ink-500: #6a6f7c;
  --c-ink-400: #8e929d;
  --c-ink-300: #b7bac2;
  --c-ink-200: #dadbe0;
  --c-ink-150: #e5e6e9;
  --c-ink-100: #eeeef0;
  --c-ink-050: #f6f6f7;

  /* --- Brand: academic navy; copper is the instrument colour ------------ */
  --c-brand-900: #0a1830;
  --c-brand-800: #102545;
  --c-brand-700: #17355f;
  --c-primary: #151a26; /* primary actions are set in ink, not colour */
  --c-primary-hover: #262c3a;
  --c-primary-active: #0b0e15;
  --c-blue: #2f5fd0; /* the one accent: selection, focus, progress */
  --c-blue-soft: #eef2fc;
  --c-primary-soft: #eef2fc;
  --c-primary-soft-2: #d8e1f7;
  --c-primary-ring: rgba(47, 95, 208, 0.26);
  --c-focus: #2f5fd0;

  /* Copper marks every boundary the instructor controls. */
  --c-accent: #ad6417;
  --c-accent-hover: #8f5212;
  --c-accent-strong: #7d470f;
  --c-accent-soft: #fbf4ea;
  --c-accent-wash: rgba(173, 100, 23, 0.07);
  --c-accent-line: #e9cfa8;

  /* --- Semantic status: restrained, legible, never neon ----------------- */
  --c-success: #11704f;
  --c-success-soft: #edf6f1;
  --c-success-line: #c4e2d3;
  --c-warning: #9a5a0c;
  --c-warning-soft: #fcf5e9;
  --c-warning-line: #eed7ae;
  --c-danger: #b0271c;
  --c-danger-hover: #8f1f16;
  --c-danger-soft: #fdf2f0;
  --c-danger-line: #f2cdc7;
  --c-info: #2f5fd0;
  --c-info-soft: #f2f5fd;
  --c-info-line: #d6e0f6;

  /* --- Ordinal grade ramp ----------------------------------------------- *
   * Grades are ordered, so the ramp is too: one navy hue, descending
   * lightness. Chips, bars and the chart share it, so a colour on the chart
   * means the same thing in every table. Steps 1-4 carry white text, 5-8 ink;
   * every grade is also labelled, so colour is reinforcement, never the only
   * signal.                                                                  */
  --grade-1: #102f58;
  --grade-2: #1b4476;
  --grade-3: #295b93;
  --grade-4: #3a71a9;
  --grade-5: #6a93c2;
  --grade-6: #8fb0d5;
  --grade-7: #b8cde5;
  --grade-8: #dbe5f1;

  --chart-g1: var(--grade-1);
  --chart-g2: var(--grade-2);
  --chart-g3: var(--grade-3);
  --chart-g4: var(--grade-4);
  --chart-g5: var(--grade-5);
  --chart-g6: var(--grade-6);
  --chart-g7: var(--grade-7);
  --chart-g8: #c6d6ea;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: "SFMono-Regular", "Cascadia Mono", Consolas,
    "Liberation Mono", Menlo, monospace;

  --fs-3xs: 0.625rem; /* 10px  micro caps */
  --fs-2xs: 0.6875rem; /* 11px  metadata */
  --fs-xs: 0.75rem; /* 12px  secondary */
  --fs-sm: 0.8125rem; /* 13px  body, tables, controls */
  --fs-base: 0.8125rem; /* 13px  the workstation reads dense */
  --fs-md: 0.875rem; /* 14px  section titles */
  --fs-lg: 1rem; /* 16px */
  --fs-xl: 1.5rem; /* 24px  page titles */
  --fs-2xl: 1.75rem; /* 28px  readouts */
  --fs-3xl: 2.5rem; /* 40px  hero figures */
  --fs-4xl: 3rem; /* 48px */
  --num: "tnum" 1, "ss01" 1; /* instrument figures: tabular, open digits */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-loose: 1.65;

  --tracking-eyebrow: 0.06em;
  --tracking-tight: -0.011em;
  --tracking-tighter: -0.02em;
  --tracking-display: -0.028em;

  /* --- Spacing: 4px base ------------------------------------------------ */
  --sp-0: 0;
  --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: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* --- Control heights: three sizes, used everywhere -------------------- */
  --h-sm: 28px;
  --h-md: 32px;
  --h-lg: 38px;

  /* --- Radii: disciplined, never pill-by-default ------------------------ */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-2xl: 12px;
  --r-pill: 999px;

  /* --- Elevation: almost flat; only floating layers lift ---------------- */
  --sh-xs: 0 1px 1px rgba(11, 19, 34, 0.035);
  --sh-sm: 0 1px 2px rgba(11, 19, 34, 0.05);
  --sh-md: 0 1px 2px rgba(11, 19, 34, 0.04), 0 4px 12px -2px rgba(11, 19, 34, 0.08);
  --sh-lg: 0 2px 4px rgba(11, 19, 34, 0.04), 0 12px 28px -6px rgba(11, 19, 34, 0.16);
  --sh-xl: 0 4px 10px rgba(11, 19, 34, 0.06), 0 28px 64px -12px rgba(11, 19, 34, 0.28);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --ring: 0 0 0 3px var(--c-primary-ring);
  --ring-focus: 0 0 0 1px var(--c-surface), 0 0 0 3px var(--c-focus);

  /* --- Motion: restrained, explanatory, never bouncy -------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.55, 0, 0.35, 1);
  --ease-spring: var(--ease-out);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 320ms;

  /* --- Layout ----------------------------------------------------------- */
  --shell-max: 1560px;
  --rail-w: 224px;
  --rail-w-compact: 60px;
  --bar-h: 48px;
  --header-h: 48px;
  --z-sticky: 20;
  --z-drawer: 40;
  --z-toast: 60;
  --z-modal: 80;
}