/* Civadelia design tokens.
   Loaded first by templates/base.html. Every other stylesheet should consume
   these instead of literal values.

   Brand tokens are derived from the per-institution variables that base.html
   sets inline on the shell element ([data-co-shell]):
     --co-tenant-primary        institution primary_colour (falls back to Civadelia red)
     --co-tenant-on-primary     readable text colour on top of the primary (server computed)
     --co-tenant-primary-text   primary darkened until it is readable on white (server computed)
     --co-tenant-primary-text-dark  primary lightened until readable on dark surfaces
   Custom properties resolve where they are declared, so brand tokens are
   declared on [data-co-shell] as well as :root; declaring them on :root alone
   would freeze them to the fallback colour.

   Breakpoints (custom properties cannot be used inside @media, so use the
   literal values):  sm 640px · md 960px · lg 1280px  */

/* Inter variable font, self-hosted (SIL Open Font License, static/fonts/inter/OFL.txt). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable-latin.8e433c0592f7.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-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable-latin-ext.ad4eb06671be.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 {
  /* Neutrals */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f4f6f8;
  --surface-hover: #f5f7f9;
  --border: #dce2e9;
  --border-subtle: #e8ecf0;
  --border-strong: #c3cbd6;
  --text: #222a35;
  --text-muted: #586779;
  --text-faint: #8a94a3;

  /* Status (never institution-coloured) */
  --danger: #b42318;
  --danger-hover: #912018;
  --danger-soft: #fef3f2;
  --danger-text: #b42318;
  --on-danger: #ffffff;
  --warning-soft: #fff8e6;
  --warning-border: #f5dca0;
  --warning-text: #8a4b08;
  --warning-accent: #ffcc00;
  --on-warning-accent: #332600;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* Spacing (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-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, .08);

  /* Layers */
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-overlay: 60;
  --z-modal: 80;
}

:root,
[data-co-shell] {
  --brand: var(--co-tenant-primary, #AD2940);
  --brand-hover: color-mix(in srgb, var(--brand) 86%, #000);
  --brand-strong: color-mix(in srgb, var(--brand-text) 85%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--surface));
  --brand-faint: color-mix(in srgb, var(--brand) 5%, var(--surface));
  --brand-text: var(--co-tenant-primary-text, var(--brand));
  --on-brand: var(--co-tenant-on-primary, #ffffff);
  /* The institution colour lightened for the dark student and lecturer sidebar (icons, left edges). */
  --brand-on-dark: color-mix(in srgb, var(--brand) 55%, #fff);
}

html[data-civa-theme="dark"] {
  --bg: #111318;
  --surface: #222730;
  --surface-2: #2b313b;
  --surface-hover: #303945;
  --border: #414b59;
  --border-subtle: #343943;
  --border-strong: #647082;
  --text: #f0f2f6;
  --text-muted: #bdc8d4;
  --text-faint: #8a94a3;
  --danger-soft: #3a2225;
  --danger-text: #fda29b;
  --warning-soft: #3a3020;
  --warning-border: #6b5323;
  --warning-text: #fbd38d;
  --shadow-sm: none;
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
}

html[data-civa-theme="dark"],
html[data-civa-theme="dark"] [data-co-shell] {
  --brand-soft: color-mix(in srgb, var(--brand) 22%, var(--surface));
  --brand-faint: color-mix(in srgb, var(--brand) 12%, var(--surface));
  --brand-text: var(--co-tenant-primary-text-dark, color-mix(in srgb, var(--brand) 55%, #fff));
}

/* Foundations */
html {
  font-family: var(--font-sans);
}

/* Figures line up in columns and don't shift width as values change. */
table,
[class*="stat"] strong,
[class*="kpi"] strong,
[class*="metric"] strong {
  font-variant-numeric: tabular-nums;
}