/* GENERATED by scripts/build-tokens.mjs from lib/tokens.js — do not edit. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/playfair-display-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/playfair-display-latin-700-normal.woff2') format('woff2');
}

:root {
  /* Colour */
  --c-brand: #A8121F;
  --c-brand-dark: #780C16;
  --c-brand-ink: #5C0810;
  --c-on-brand: #FFFFFF;
  --c-on-brand-dim: rgba(255,255,255,0.80);
  --c-canvas: #7E1621;
  --c-canvas-deep: #5A0D15;
  --c-surface: rgba(255,255,255,0.07);
  --c-surface-alt: rgba(255,255,255,0.04);
  --c-line: rgba(255,255,255,0.14);
  --c-silver100: #FAFBFC;
  --c-silver200: #E8EAEE;
  --c-silver300: #CFD4DB;
  --c-silver400: #AEB5BF;
  --c-slate900: #171C26;
  --c-slate700: #3D4757;
  --c-slate500: #5C6779;
  --c-slate300: #CDD3DC;
  --c-slate100: #EEF0F3;
  --c-slate50: #F7F8FA;
  --c-gold700: #8A6A16;
  --c-gold500: #B8912A;
  --c-gold400: #D4AF37;
  --c-gold100: #FAF2DC;
  --c-green700: #15803D;
  --c-green50: #F0FDF4;
  --c-red700: #B91C1C;
  --c-red50: #FEF2F2;
  --c-stage-ink: #0A0A0B;
  --c-stage-card: #121215;
  --c-stage-text: #F4F5F7;
  --c-stage-dim: #8A9099;
  --c-platinum: #E3E4E8;

  /* Translucent layers */
  --a-gold-faint: rgba(212,175,55,0.10);
  --a-gold-line: rgba(184,145,42,0.45);
  --a-brand-faint: rgba(168,18,31,0.06);
  --a-brand-soft: rgba(255,255,255,0.16);
  --a-hairline: rgba(23,28,38,0.08);
  --a-scrim: rgba(0,0,0,0.45);

  /* Typefaces */
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --r-card: 12;
  --r-ctrl: 8;
  --r-pill: 6;
  --r-round: 999;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(23,28,38,0.06), 0 1px 3px rgba(23,28,38,0.04);
  --shadow-raised: 0 4px 12px rgba(23,28,38,0.08), 0 1px 3px rgba(23,28,38,0.06);
  --shadow-band: 0 1px 0 rgba(0,0,0,0.10), 0 6px 18px rgba(0,0,0,0.16);

  /* Motion */
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-ease: cubic-bezier(.4,0,.2,1);

  /* Gradients */
  --grad-band: linear-gradient(180deg, #71121D 0%, #560C14 100%);
  --grad-canvas: radial-gradient(1100px 640px at 50% -220px, #9E1B29 0%, #7E1621 46%, #5A0D15 100%);
  --grad-silver: linear-gradient(180deg, #FDFDFE 0%, #E8EAEE 42%, #CFD4DB 58%, #B9C0C9 100%);
  --grad-silver-hover: linear-gradient(180deg, #FFFFFF 0%, #F1F3F5 42%, #DBE0E6 58%, #C7CDD5 100%);
  --grad-gold: linear-gradient(135deg, #E4C55C 0%, #D4AF37 45%, #B8912A 100%);
  --grad-stage: radial-gradient(1400px 700px at 50% -10%, rgba(168,18,31,.30), transparent 70%);

  /* Type scale */
  --text-xs: 0.6875rem;
  --text-sm: 0.78125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2.125rem;
  --text-4xl: 2.75rem;

  /* Spacing, 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* Shared foundation. Every surface — app, admin, displays — starts here. */
html { color-scheme: light; }

body {
  margin: 0;
  background: var(--c-canvas-deep);
  background-image: var(--grad-canvas);
  background-attachment: fixed;
  color: var(--c-silver100);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.01em; line-height: 1.2; }

::selection { background: var(--a-gold-faint); color: #fff; }

/* ── The silver button. The one control style on the red ground: brushed
   metal, dark text, a highlight at the top edge so it reads as raised. */
.btn-silver {
  background-image: var(--grad-silver);
  color: var(--c-slate900);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: var(--r-ctrl);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.35);
  font-weight: 600;
  cursor: pointer;
}
.btn-silver:hover { background-image: var(--grad-silver-hover); }
.btn-silver:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); }

/* ── The brand band. Chrome across the top of every surface, exactly like
   Pismo's header: brand left, actions right, content on the calm canvas below. */
.band {
  background: var(--grad-band);
  color: var(--c-on-brand);
  box-shadow: var(--shadow-band);
  position: sticky; top: 0; z-index: 30;
}
.band { border-bottom: 1px solid rgba(212,175,55,0.28); }
.band-inner {
  display: flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 18px; max-width: 1120px; margin: 0 auto;
}
/* Small white plate: the mark is red and needs a light ground to read on. */
.band-mark {
  background: #fff; border-radius: 5px; padding: 4px 7px;
  display: flex; align-items: center; flex: none;
}
.band-mark img { display: block; height: 20px !important; width: auto !important; }
.band-title {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; line-height: 1;
}
.band-sub {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); line-height: 1; margin-top: 4px;
}
.band-spacer { margin-left: auto; }

/* ── Panels. A pane lifted off the red, not a white card. */
.panel {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-card); backdrop-filter: blur(6px);
  margin-bottom: var(--space-4); overflow: hidden;
}
.panel > h2 {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px;
  color: var(--c-gold400); padding: 11px 16px; margin: 0;
  border-bottom: 1px solid var(--c-line);
  display: flex; align-items: center; gap: 8px;
}
.panel-body { padding: 16px; }

/* One control size everywhere; 44px and 16px text on touch so iOS never zooms. */
.ctrl, input:not([type=checkbox]):not([type=radio]), select, textarea {
  height: var(--control-height); padding: 0 var(--control-pad-x);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-ctrl);
  background: rgba(0,0,0,0.22); color: var(--c-silver100); font: inherit;
}
textarea { height: auto; padding: 10px var(--control-pad-x); }

@media (max-width: 1200px) {
  input, select, textarea, .ctrl { font-size: 16px; height: var(--control-height-touch); }
}

/* ── Stage: the projected display screens. A dark room is a different medium,
   not a second design — same brand crimson and gold, inverted ground. */
.stage {
  background: var(--c-stage-ink);
  background-image: var(--grad-stage);
  color: var(--c-stage-text);
  min-height: 100vh;
}
.stage-ribbon {
  height: 6px;
  background: linear-gradient(90deg,
    var(--c-brand) 0%, var(--c-brand) 20%, var(--c-gold400) 20%, var(--c-gold400) 40%,
    var(--c-platinum) 40%, var(--c-platinum) 60%, var(--c-gold400) 60%, var(--c-gold400) 80%,
    var(--c-brand) 80%, var(--c-brand) 100%);
}

/* ── Compatibility aliases. The admin console and display screens still use the
   previous names; these keep them rendering until each is converted. Remove
   once nothing references them. */
:root {
  --c-ink900: var(--c-stage-ink);
  --c-ink800: var(--c-stage-card);
  --c-ink700: #1A1A1F;
  --c-silver100: var(--c-stage-text);
  --c-silver300: #C9CDD4;
  --c-silver500: var(--c-stage-dim);
  --c-crimson900: var(--c-brand-ink);
  --c-crimson700: var(--c-brand);
  --c-crimson500: #C42741;
  --c-crimson300: #E0596E;
  --c-gold300: #E4C55C;
  --c-gold500: var(--c-gold500);
  --c-success: var(--c-green700);
  --a-hairline: rgba(255,255,255,0.09);
  --a-gold-soft: rgba(212,175,55,0.18);
  --grad-crimson: var(--grad-band);
  --r-sm: var(--r-ctrl);
  --r-md: var(--r-card);
  --r-lg: 20px;
  --shadow-soft: var(--shadow-card);
  --shadow-lift: var(--shadow-raised);
}

/* One visible focus ring everywhere, instead of none. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-gold400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* The crimson/gold/silver ribbon — the one motif shared by every surface. */
.ribbon {
  height: 3px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    var(--c-crimson700) 0%, var(--c-crimson700) 20%,
    var(--c-gold400) 20%, var(--c-gold400) 40%,
    var(--c-platinum) 40%, var(--c-platinum) 60%,
    var(--c-gold400) 60%, var(--c-gold400) 80%,
    var(--c-crimson700) 80%, var(--c-crimson700) 100%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}