/* Self-hosted Inter (variable) so the site renders in its intended type on a
   phone that has never seen Inter, without a call out to a font CDN (privacy +
   no third-party dependency on the public site). One variable file covers every
   weight the type scale uses (400–800). font-display: swap paints text
   immediately in the fallback and swaps Inter in when it loads. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.2bf3d951bf9d.woff2") format("woff2");
}

/* Design tokens — a verbatim mirror of the Figma Color and Type variable
   collections in "League Platform — Phase 1" (file pzADEPfyCU5spZAFxfvGwb,
   page "Phase 1 — Parent"). Change Figma first, then this file.

   Space and radius are NOT Figma variables — they are measured off the frames
   and owned here. See docs/design/design-system.md.

   Nothing in this file is a component. Components live in app.css. If a value
   is not defined here, it does not exist: no ad-hoc hex, size, or radius in a
   template or a component rule. */

:root {
  /* ---- Colour: ink (text) ---- */
  --ink-900: #101720;   /* body text, dark surfaces */
  --ink-700: #2c3a47;   /* secondary text on light, hover on dark surfaces */
  --ink-500: #5a6b7a;   /* supporting copy, labels */
  --ink-300: #93a2ae;   /* muted copy, text on dark surfaces */

  /* ---- Colour: surfaces ---- */
  --surface-page: #faf7f2;    /* chalk — the page ground */
  --surface-raised: #ffffff;  /* cards, table rows, inputs */
  --surface-sunken: #f0ebe3;  /* track fills, table headers, wells */
  --white: #ffffff;

  /* ---- Colour: borders ---- */
  --border: #dfd8cd;
  --border-strong: #c3b8a8;

  /* ---- Colour: clay (primary / brand) ---- */
  --clay-600: #a93a16;  /* pressed, text-on-light */
  --clay-500: #c4491f;  /* primary buttons, brand mark */
  --clay-100: #fbe9e1;  /* tinted callout ground */

  /* ---- Colour: field (positive / open) ---- */
  --field-600: #17593c;
  --field-500: #1f6b4a;
  --field-100: #ddf0e6;

  /* ---- Colour: alert (negative / full / overdue) ---- */
  --alert-500: #b3261e;
  --alert-100: #fbe3e1;

  /* ---- Colour: amber (caution / filling / needs signature) ---- */
  --amber-500: #9a6410;
  --amber-100: #fbefd8;

  /* ---- Colour: categorical (calendar division coding) ----
     NOT Figma variables (yet) — owned here like space/radius, flagged in
     docs/design/design-system.md for the next Figma sync. Eight muted hues
     that sit on the chalk ground; assignment cycles by division order, so
     the same division keeps its colour across every scheduling screen. */
  --cat-0: #1f6b4a;  /* field green */
  --cat-1: #23557f;  /* lake */
  --cat-2: #a93a16;  /* clay */
  --cat-3: #6b4a92;  /* plum */
  --cat-4: #9a6410;  /* amber */
  --cat-5: #197278;  /* teal */
  --cat-6: #8a3a5e;  /* mulberry */
  --cat-7: #55613b;  /* moss */

  /* Per-organization brand. TenantMiddleware puts org on the request and
     site/base.html emits the override, so a league's own colours win without
     any template hard-coding a hex value. */
  --brand: var(--clay-500);
  --brand-dark: var(--clay-600);
  /* The brand colour used as TEXT on a light surface. Separate from --brand
     because a colour readable as a button fill is not always readable as
     14px type; branding.theme_for() derives both. */
  --brand-ink: var(--clay-600);

  /* ---- Type: family ---- */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ---- Type: the app ramp (11 styles) ---- */
  --type-display-xl:     800 40px/44px var(--font-sans);
  --type-display-l:      800 30px/34px var(--font-sans);
  --type-heading-l:      700 24px/30px var(--font-sans);
  --type-heading-m:      700 19px/25px var(--font-sans);
  --type-heading-s:      600 16px/22px var(--font-sans);
  --type-body-l:         400 17px/26px var(--font-sans);
  --type-body-m:         400 15px/23px var(--font-sans);
  --type-body-m-strong:  600 15px/23px var(--font-sans);
  --type-body-s:         400 13px/19px var(--font-sans);
  --type-label-m:        600 13px/16px var(--font-sans);
  --type-label-s:        700 11px/14px var(--font-sans);

  /* ---- Type: the public-site ramp. Bigger and tighter than the app ramp,
     for full-width desktop layouts. Site pages only. ---- */
  --type-site-display:   800 56px/58px var(--font-sans);
  --type-site-h1:        800 36px/42px var(--font-sans);
  --type-site-h2:        700 22px/28px var(--font-sans);
  --type-site-lead:      400 19px/29px var(--font-sans);

  /* Tracking is a separate property from the `font` shorthand above. */
  --track-display-xl: -1.2px;
  --track-display-l: -0.8px;
  --track-site-display: -2px;
  --track-site-h1: -1px;
  --track-site-h2: -0.3px;
  --track-heading-l: -0.4px;
  --track-heading-m: -0.2px;
  --track-label-m: 0.3px;
  --track-label-s: 0.8px;

  /* ---- Space: 4px scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Elevation. One shadow, used sparingly; the design leans on borders. ---- */
  --shadow-card: 0 1px 2px rgb(16 23 32 / 4%);

  /* ---- Layout ---- */
  --site-max: 1080px;      /* public site content column */
  --app-max: 560px;        /* parent app — phone-first, capped on desktop */
  --console-sidebar: 248px;
  --console-max: 1032px;

  /* Minimum comfortable touch target. PAR-002: everything works on a phone
     without pinch-zoom, which starts with not shipping 28px tap targets. */
  --tap: 44px;
}