/* St. Maria College design tokens — the only file with literal colours (see docs/DESIGN_SYSTEM.md).
   Loaded first on every page. Three layers:
     1. palette   --p-*  Lavro's eight colours, and --d-* shades derived from them with color-mix() (nothing else)
     2. semantic  paper, ink, accent, link, states, focus, stroke, scrim, shadow … (and the older page names)
     3. component one variable per element (tags, badge, pennant, stamp, twine, cards …)
   Change a palette colour → every page follows. Change a semantic/component variable → only that role/element. */

/* ---------- 1. palette ---------- */
:root {
  --p-wine: #9C2434;   /* 酒红 */
  --p-pine: #23483B;   /* 松绿 */
  --p-frost: #C8DCE4;  /* 雾蓝：浅底，深底上的文字色 */
  --p-gold: #D3A33B;   /* 芥黄 · decorative：只在藏青底上可写小字，其余只做装饰 */
  --p-bark: #4A302A;   /* 树皮棕 */
  --p-paper: #F3E7D2;  /* 纸 */
  --p-ember: #C3462D;  /* 枫橙 · decorative：只做装饰或大字（≥18.66px 粗体 / 24px） */
  --p-navy: #24304B;   /* 藏青 */
  /* derived shades: --d-<a>-<b>-<n> = n% of a mixed with b (white/black only lighten or darken a palette colour) */
  --d-bark-black-10: color-mix(in srgb, var(--p-bark) 10%, black);
  --d-bark-black-60: color-mix(in srgb, var(--p-bark) 60%, black);
  --d-bark-black-70: color-mix(in srgb, var(--p-bark) 70%, black);
  --d-bark-gold-80: color-mix(in srgb, var(--p-bark) 80%, var(--p-gold));
  --d-bark-gold-90: color-mix(in srgb, var(--p-bark) 90%, var(--p-gold));
  --d-bark-paper-60: color-mix(in srgb, var(--p-bark) 60%, var(--p-paper));
  --d-bark-white-50: color-mix(in srgb, var(--p-bark) 50%, white);
  --d-bark-white-80: color-mix(in srgb, var(--p-bark) 80%, white);
  --d-ember-white-20: color-mix(in srgb, var(--p-ember) 20%, white);
  --d-ember-white-60: color-mix(in srgb, var(--p-ember) 60%, white);
  --d-frost-paper-20: color-mix(in srgb, var(--p-frost) 20%, var(--p-paper));
  --d-frost-paper-40: color-mix(in srgb, var(--p-frost) 40%, var(--p-paper));
  --d-frost-paper-70: color-mix(in srgb, var(--p-frost) 70%, var(--p-paper));
  --d-frost-white-80: color-mix(in srgb, var(--p-frost) 80%, white);
  --d-gold-bark-70: color-mix(in srgb, var(--p-gold) 70%, var(--p-bark));
  --d-gold-paper-30: color-mix(in srgb, var(--p-gold) 30%, var(--p-paper));
  --d-gold-white-20: color-mix(in srgb, var(--p-gold) 20%, white);
  --d-gold-white-40: color-mix(in srgb, var(--p-gold) 40%, white);
  --d-navy-black-70: color-mix(in srgb, var(--p-navy) 70%, black);
  --d-paper-ember-90: color-mix(in srgb, var(--p-paper) 90%, var(--p-ember));
  --d-paper-white-10: color-mix(in srgb, var(--p-paper) 10%, white);
  --d-paper-white-20: color-mix(in srgb, var(--p-paper) 20%, white);
  --d-paper-white-50: color-mix(in srgb, var(--p-paper) 50%, white);
  --d-paper-white-80: color-mix(in srgb, var(--p-paper) 80%, white);
  --d-paper-white-90: color-mix(in srgb, var(--p-paper) 90%, white);
  --d-pine-black-70: color-mix(in srgb, var(--p-pine) 70%, black);
  --d-pine-frost-10: color-mix(in srgb, var(--p-pine) 10%, var(--p-frost));
  --d-pine-frost-70: color-mix(in srgb, var(--p-pine) 70%, var(--p-frost));
  --d-pine-gold-90: color-mix(in srgb, var(--p-pine) 90%, var(--p-gold));
  --d-pine-navy-70: color-mix(in srgb, var(--p-pine) 70%, var(--p-navy));
  --d-pine-paper-70: color-mix(in srgb, var(--p-pine) 70%, var(--p-paper));
  --d-pine-white-10: color-mix(in srgb, var(--p-pine) 10%, white);
  --d-pine-white-40: color-mix(in srgb, var(--p-pine) 40%, white);
  --d-wine-black-80: color-mix(in srgb, var(--p-wine) 80%, black);
}

/* ---------- 2. semantic ---------- */
:root {
  /* surfaces and ink */
  --surface-desk: var(--d-pine-black-70);        /* the tartan desk behind everything */
  --surface-paper: var(--p-paper);               /* every content card: one paper colour */
  --surface-paper-hi: var(--d-paper-white-50);   /* lighter paper (inputs, inner panels) */
  --surface-paper-max: var(--d-paper-white-20);
  --ink: var(--d-bark-black-70);
  --ink-soft: color-mix(in srgb, var(--p-bark) 85%, var(--p-paper));  /* was 60%: 3.4:1 failed body text */
  --ink-on-dark: var(--p-paper);
  --accent: var(--p-wine);
  --accent-deep: var(--d-wine-black-80);
  --accent-2: var(--p-pine);
  --link: var(--p-wine);
  --success: var(--p-pine);
  --warning: var(--p-gold);
  --error: var(--p-ember);
  --focus: var(--p-gold);
  --stroke: color-mix(in srgb, var(--p-bark) 16%, transparent);
  --scrim: color-mix(in srgb, var(--d-pine-black-70) 60%, transparent);
  --shadow-color: var(--d-bark-black-10);
  --chip: var(--d-gold-paper-30);
  /* mail bodies (resolved to plain colours by College.color) */
  --mail-ink: var(--ink); --quote-rule: var(--p-gold); --quote-ink: var(--d-bark-white-80);
  --group-default: var(--p-pine);

  /* two voices, two papers: the school speaking (notices, welcome, the college) and how-to help (login, submitting,
     errors). Never mix them on one card. */
  --voice-official-paper: var(--p-paper); --voice-official-head: var(--p-wine); --voice-official-ink: var(--ink);
  --voice-guide-paper: var(--p-frost); --voice-guide-ink: var(--p-navy); --voice-guide-rule: var(--p-navy);

  /* readability (WCAG): light grounds take bark/navy/pine/wine text only; dark grounds take paper/frost only; gold
     text only on navy; gold and ember are otherwise decorative. test/frontend-tokens.test.js checks every pair below
     (text / background / size: body ≥ 4.5:1, large ≥ 3:1). */
  --contrast-pairs: "ink/surface-paper/body, ink-soft/surface-paper/body, link/surface-paper/body, accent/surface-paper-hi/body, voice-official-head/voice-official-paper/body, voice-official-ink/voice-official-paper/body, voice-guide-ink/voice-guide-paper/body, ink-on-dark/surface-desk/body, tag-ink/tag-college-bg/body, tag-ink/tag-campus-bg/body, tag-ink/tag-news-bg/body, tag-ink/tag-mail-bg/body, tag-show-ink/tag-show-bg/body, tag-adm-ink/tag-adm-bg/body, tag-adm-en/tag-adm-bg/body, library-card-ink/library-card-bg/body, badge-top-ink/badge-top-bg/body, badge-hint/badge-paper/body, stamp-ink/stamp-bg/body, red/paper-2/body, cream/red/body, gold/surface-desk/body, gold-soft/surface-desk/body, muted/paper/body, red-deep/gold-soft/body, brown/gold-soft/body";

  /* the names the page styles were written with — kept as semantic aliases */
  --red: var(--p-wine); --red-deep: var(--d-wine-black-80); --red-soft: var(--d-ember-white-20);
  --green: var(--p-pine); --green-deep: var(--d-pine-black-70);
  --gold: var(--p-gold); --gold-soft: var(--d-gold-white-40);
  --cream: var(--p-paper); --paper: var(--surface-paper); --paper-2: var(--surface-paper-max);
  --navy: var(--p-navy); --brown: var(--p-bark); --muted: var(--ink-soft);
  --line: var(--stroke);

  /* type */
  --display: "Iowan Old Style", Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", serif;
  --zh: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --ui: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --label: "Rockwell", "Roboto Slab", Georgia, serif;
  --type: Georgia, "Times New Roman", serif;
  --wordmark: "Roboto Serif", Georgia, serif;
  --text-xs: 12px; --text-sm: 13.5px; --text-card: 15.5px; --text-lead: 17px; --text-h3: 21px; --text-h2: 26px;

  /* shape, depth, tilt, motion */
  --radius-sm: 3px; --radius: 4px; --radius-badge: 9px;
  --gap: 18px; --gap-lg: 26px;
  --shadow-paper: 3px 4px 0 color-mix(in srgb, var(--shadow-color) 20%, transparent), 0 18px 28px -14px color-mix(in srgb, var(--shadow-color) 60%, transparent);
  --shadow-lift: 0 8px 12px color-mix(in srgb, var(--shadow-color) 35%, transparent);
  --tilt-max: .5deg;                 /* content cards never lean more than this */
  --frame: 160ms;                    /* one held stop-motion frame */
  --idle: 750ms;                     /* one idle exposure (pennant only) */
  --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: .16s; --dur: .28s;
  --page-max: 1180px;
  color-scheme: light;
}

/* ---------- 3. component ---------- */
:root {
  /* top bar pieces (shell.css) */
  --cp-wine: var(--p-wine); --cp-pine: var(--p-pine); --cp-frost: var(--p-frost); --cp-gold: var(--p-gold);
  --cp-bark: var(--p-bark); --cp-paper: var(--p-paper); --cp-ember: var(--p-ember); --cp-navy: var(--p-navy);
  --cp-f: var(--frame); --cp-idle: var(--idle);
  --cp-en: "Graduate", var(--label);
  --cp-zh: "Noto Serif SC", var(--zh);
  --pennant-body: var(--p-wine); --pennant-hoist: var(--p-pine); --pennant-trim: var(--p-gold); --pennant-stripe: var(--p-pine);
  --pennant-letter: var(--p-paper); --pennant-letter-shadow: var(--p-gold); --pennant-stitch: var(--p-paper);
  --pennant-pole-light: var(--d-bark-gold-90); --pennant-pole: var(--p-bark); --pennant-pole-dark: var(--d-bark-black-60);
  --pennant-brass-hi: var(--p-paper); --pennant-brass: var(--p-gold); --pennant-brass-lo: var(--p-bark);
  --twine: var(--p-paper);
  --peg-wood: var(--p-bark); --peg-wood-hi: var(--p-gold); --peg-spring: var(--p-frost);
  --pin: var(--p-paper);
  --tag-college-bg: var(--p-paper); --tag-college-eyelet: var(--p-pine); --tag-college-ring: var(--p-gold);
  --tag-campus-bg: var(--p-gold);
  --tag-mail-bg: var(--p-paper); --tag-mail-stripe-a: var(--p-wine); --tag-mail-stripe-b: var(--p-navy);
  --tag-news-bg: var(--p-paper); --tag-news-rule: var(--p-wine);
  --tag-show-bg: var(--p-pine); --tag-show-frame: var(--p-paper); --tag-show-ink: var(--p-paper);
  --tag-adm-bg: var(--p-wine); --tag-adm-hem: var(--p-gold); --tag-adm-ink: var(--p-paper); --tag-adm-en: var(--p-frost);
  --tag-ink: var(--p-bark);
  --library-card-bg: var(--p-frost); --library-card-ink: var(--p-navy);
  --ring: var(--p-ember);
  --stamp-bg: var(--p-wine); --stamp-ink: var(--p-paper);
  --badge-paper: var(--p-paper); --badge-top-bg: var(--p-wine); --badge-top-ink: var(--p-paper); --badge-hint: var(--p-wine);
  --paper-bit: var(--p-paper); --paper-bit-rule: var(--p-wine); --tape: color-mix(in srgb, var(--p-gold) 70%, transparent);
  /* the hero crest (shell.js CREST) */
  --crest-shield: var(--p-wine); --crest-band: var(--p-pine); --crest-trim: var(--p-gold); --crest-ink: var(--p-paper);
  /* content cards */
  --card-paper: var(--surface-paper); --card-text: var(--text-card);
  --cork: var(--d-gold-bark-70); --cork-frame: var(--d-bark-gold-80);
}

/* Phones: iPhone Safari zooms the whole page when a focused text field is smaller than 16px, and the zoom stays
   after the keyboard closes. Every text field on a touch screen or phone-width page is at least 16px; the two
   fields drawn larger on purpose (the registration code and the issued invitation code) keep their size. */
@media (pointer: coarse), (max-width: 640px) {
  input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=image], .code-input, #result-code),
  select, textarea { font-size: 16px !important; }
}