/* Every colour in the app lives here (docs/DESIGN.md section 1). No hex value may appear anywhere else (a test checks).
   Two layers: BRAND (changes when IAUA re-themes iaua.us) and ROLE (what components use; points at the brand layer). */

/* Fonts: self-hosted, SIL OFL 1.1 (public/fonts/OFL.txt). Latin subset. Fallbacks keep text readable while they load. */
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/SourceSerif4-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/SourceSans3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/SourceSans3-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/SourceSans3-700.woff2") format("woff2"); }

:root {
  --fs: 1; /* text size multiplier: the staff menu and the candidate A-/A+ buttons change it (app.css scales the root font size by it) */
  /* ---- Brand layer ---- */
  --navy-900: #1b2b45;
  --blue-800: #304c78;
  --blue-700: #2a6295;
  --blue-100: #dce6f2;
  --blue-50: #eef3f9;
  --teal-700: #1a7590;
  --teal-800: #135e74;
  --sky-400: #40b2cf;
  --sky-50: #e6f6fa;
  --yellow-400: #f2c230;
  --gold-500: #c9962e;
  --gold-700: #8a6516;
  --gold-50: #f7efdc;
  --gold-100: #f1e0b0;
  --ink: #1f2733;
  --ink-muted: #4a5566;
  --ink-subtle: #5f6b7b;
  --border-strong: #8996a6;
  --border: #d5dce5;
  --surface-100: #f5f7fa;
  --white: #ffffff;
  --success: #276a44;
  --success-50: #e8f3ec;
  --warning: #9a5b0b;
  --warning-50: #fbf1e2;
  --danger: #b3261e;
  --danger-50: #fbe9e7;
  --danger-700: #8f1d17; /* danger button hover */

  /* ---- Role layer (components use only these, plus --ink) ---- */
  --action: var(--teal-700);          /* the one primary button per view */
  --action-hover: var(--teal-800);
  --on-action: var(--white);
  --link: var(--blue-700);            /* links, secondary buttons, progress fill, selected state */
  --heading: var(--blue-800);
  --nav-bg: var(--blue-700);
  --nav-active: var(--sky-400);
  --focus: var(--sky-400);            /* accent only: about 2.5:1 on white, so never the focus ring on a light ground */
  --ring: var(--blue-700);            /* focus ring on light grounds (6:1 on white) */
  --ring-on-dark: var(--white);       /* focus ring on the blue bar and the navy band */
  --ok: var(--success);       --ok-bg: var(--success-50);
  --warn: var(--warning);     --warn-bg: var(--warning-50);
  --bad-hover: var(--danger-700); --bad: var(--danger);       --bad-bg: var(--danger-50);
  --info: var(--blue-700);    --info-bg: var(--blue-100);
  --idle: var(--ink-muted);   --idle-bg: var(--surface-100);
  --exam-cpia: var(--blue-800);
  --exam-cpiu: var(--gold-700);
  --callout-info-bg: var(--sky-50);
  --callout-draft-bg: var(--gold-50);
  /* neutrals and surfaces */
  --muted: var(--ink-muted);
  --subtle: var(--ink-subtle);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --bg: var(--surface-100);           /* page */
  --card: var(--white);               /* cards, bars, inputs */
  --selected-bg: var(--blue-50);      /* selected row/option, row hover */
  --track: var(--blue-100);           /* progress track */
  --on-dark: var(--white);
  --band: var(--navy-900);            /* room-control band, projector */
  --rehearsal-bg: var(--gold-100);    /* the full-width Rehearsal bar */
  --rehearsal-ink: var(--ink);        /* text on it (6:1) */
  --accent-gold: var(--gold-500);     /* seal gold, dark grounds only */
  --warn-icon: var(--yellow-400);     /* the yellow warning triangle (WA check-in look) */
  --tier-mid: var(--gold-700);        /* middle band of the question-difficulty bars */
  --callout-draft-border: var(--gold-700);
  --step-line: var(--blue-700);       /* outline of the three steps on the room screen */
  --scrim: rgb(0 0 0 / .5);           /* behind dialogs and the side panel */
  --hover-on-dark: rgb(255 255 255 / .14);
  --shadow: 0 4px 16px rgb(0 0 0 / .3);
  --shadow-up: 0 -4px 16px rgb(0 0 0 / .3);
  --shadow-side: -4px 0 20px rgb(0 0 0 / .3);
  --avatar-sl: 45% 31%;               /* saturation and lightness of the initials circle; hue is per person */
}

/* The initials circle: the hue is the person's (set inline as --hue); the rest is a token. */
.avatar { background: hsl(var(--hue, 210) var(--avatar-sl)); }