/* theme.css — design tokens + base styles, mirroring Scheduler V2 (see DESIGN.md).
   Hand-written CSS custom properties. No preprocessor. */

/* Inter is NOT hosted here, and the @font-face that claimed it was is deliberately
   gone (2026-08-28, Michael's call).
   `assets/fonts/inter-variable.woff2` has never existed in this repo — the fonts
   directory holds only the two Futura Std faces the printed menu sheet uses. The
   rule pointed at a missing file, and because the server answers an unknown path
   with index.html rather than a 404, the browser received 548 bytes of
   `<!DOCTYPE html>`, tried to parse it as a font, and logged
   "Failed to decode downloaded font / OTS parsing error: invalid sfntVersion:
   1008813135" (that number is the ASCII `<!DO`) four or five times on EVERY page
   load, on staging2 as well as locally.
   Nothing looked wrong, because --font-body below already falls through to the
   system sans — the original comment even said so. The cost was purely a console
   full of fake errors, which is where the gate's power-debug channel looks for
   real ones.
   `'Inter'` is intentionally KEPT at the head of --font-body: with no @font-face
   it now means "use Inter if this machine happens to have it installed", which
   costs no request and cannot fail. Restoring the web font means adding the real
   .woff2 to public/assets/fonts/ AND putting this block back — do both or
   neither.
   The deeper issue is untouched and is its own job: a missing static asset should
   404, not return the app shell. Any other missing file here fails the same silent
   way. */

:root {
  /* Brand */
  --color-navy: #1c355e;
  --color-navy-dark: #0a1830;
  --color-gold: #cb9a33;
  --color-gold-light: #d8a843;
  --color-gold-dark: #b88420;

  /* Text */
  --color-text-primary: #1c355e;
  --color-text-secondary: #5a6a85;
  /* Tertiary was #8896ad (2.99:1 on white, below WCAG AA for the 12px hints it
     colours). #627089 clears 4.5:1 on white (5.00) and on the darkest end of the
     page background, #f1f3f8 (4.51). Hierarchy against secondary now comes
     from size and weight, not a washed-out colour. */
  --color-text-tertiary: #627089;

  /* Surfaces */
  --color-page-from: #fafbfd;
  --color-page-to: #f1f3f8;
  --color-card-border: rgba(28, 53, 94, 0.08);
  --color-input-border: rgba(28, 53, 94, 0.18);
  --color-table-row-border: rgba(28, 53, 94, 0.06);
  --color-table-header-bg: #fafbfd;
  --color-white: #ffffff;

  /* Status families */
  --color-success-bg-from: #e6f7ee;
  --color-success-bg-to: #d1f0e0;
  --color-success-text: #0a6e3f;
  --color-success-border: rgba(10, 110, 63, 0.15);
  --color-warning-bg-from: #fef4e6;
  --color-warning-bg-to: #fce7c4;
  --color-warning-text: #92400e;
  --color-warning-border: rgba(146, 64, 14, 0.15);
  --color-danger-bg-from: #fde9e9;
  --color-danger-bg-to: #f9d4d4;
  --color-danger-text: #991b1b;
  --color-danger-border: rgba(153, 27, 27, 0.18);

  /* Type */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  /* Spacing */
  --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-button: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(28, 53, 94, 0.04), 0 4px 8px rgba(28, 53, 94, 0.05);
  --shadow-card-elevated: 0 1px 2px rgba(28, 53, 94, 0.04), 0 4px 8px rgba(28, 53, 94, 0.05),
    0 16px 32px rgba(28, 53, 94, 0.06);
  --shadow-gold-cta: 0 4px 8px rgba(184, 132, 32, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: linear-gradient(180deg, var(--color-page-from) 0%, var(--color-page-to) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--color-navy);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}
h1 { font-size: 24px; letter-spacing: -0.02em; }
h2 { font-size: 19px; letter-spacing: -0.01em; }
h3 { font-size: 16px; }

a {
  color: var(--color-navy);
  text-decoration: none;
}
a:hover { color: var(--color-gold-dark); }

/* ---- Type utilities ---- */

.label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-navy);
}

.hero-number {
  font-size: 64px;
  letter-spacing: -0.04em;
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
/* Quiet explanatory text (09 A12; R93): admin.js used .muted long before it was
   defined anywhere. text-secondary is 5.48:1 on white, 4.93:1 on the page
   background's darkest end (#f1f3f8) and 5.29:1 on the table header (#fafbfd),
   all above WCAG AA. Never dim text with opacity instead (09 A0.4). */
.muted { color: var(--color-text-secondary); }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ---- Layout helpers ---- */

.row { display: flex; align-items: center; }
.row-gap-2 { gap: var(--space-2); }
.row-gap-3 { gap: var(--space-3); }
.row-gap-4 { gap: var(--space-4); }
.col { display: flex; flex-direction: column; }
.col-gap-2 { gap: var(--space-2); }
.col-gap-3 { gap: var(--space-3); }
.col-gap-4 { gap: var(--space-4); }
.spacer { flex: 1 1 auto; }
.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }
/* Read by a screen reader, not drawn (P6b b5-8: a table header with no visible text; the import
   screen's announcements). The standard clip pattern: no box, so it cannot move the layout. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gold-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold-dark));
  margin: var(--space-4) 0;
}

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 53, 94, 0.2) transparent;
}
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(28, 53, 94, 0.2);
  border-radius: var(--radius-pill);
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(28, 53, 94, 0.3); }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }