/* PublishArc design tokens — shared by the website and the dashboard.
   Layout concept: a calm paper workspace with one "departures board" in deep forest green;
   amber is the signal colour for what is about to go out. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,650;12..96,760&family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --paper: #f2f4ef;          /* page ground, green-tinted */
  --surface: #ffffff;        /* cards and panels */
  --surface-2: #e9ede6;      /* inset wells, hovers */
  --ink: #15241e;            /* primary text */
  --ink-2: #4a5a52;          /* secondary text */
  --ink-3: #7b8a82;          /* captions, placeholders */
  --line: #dae1d8;           /* hairlines */
  --line-strong: #c3cdc0;
  --forest: #1d4d3c;         /* brand */
  --forest-ink: #ffffff;
  --forest-soft: #dfeadf;
  --board: #10261e;          /* departures board */
  --board-ink: #e9f1e9;
  --board-dim: #8fa69a;
  --board-line: #24402f;
  --signal: #f0a92e;         /* amber: upcoming / attention */
  --signal-soft: #fbecc9;
  --ok: #1f7a4d;   --ok-soft: #dcefe2;
  --warn: #a35f0c; --warn-soft: #fbeccf;
  --bad: #b23b2a;  --bad-soft: #f8e0db;
  --info: #3c5aa6; --info-soft: #e2e8f7;
  --shadow: 0 1px 2px rgb(21 36 30 / .06), 0 8px 24px rgb(21 36 30 / .06);
  --shadow-lg: 0 24px 64px rgb(16 38 30 / .18);

  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --r-sm: 6px; --r: 10px; --r-lg: 16px;
  --fb: #1877f2; --ig: #d62976; --yt: #e62117; --tt: #111111; --th: #222222; --bs: #1185fe; --gd: #188038;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1714; --surface: #14211c; --surface-2: #1b2b25; --ink: #e8efe9; --ink-2: #b2c2b8; --ink-3: #82958a;
    --line: #26372f; --line-strong: #345044; --forest: #5dbb8f; --forest-ink: #08140f; --forest-soft: #1c3a2e;
    --board: #08130f; --board-ink: #e9f1e9; --board-dim: #7f988b; --board-line: #1f3529;
    --signal: #f4b443; --signal-soft: #3d3016;
    --ok: #5cc78f; --ok-soft: #173a29; --warn: #f0b04c; --warn-soft: #3b2c12; --bad: #f08a78; --bad-soft: #42201b; --info: #93aef0; --info-soft: #1d2a48;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25); --shadow-lg: 0 24px 64px rgb(0 0 0 / .5);
    --tt: #f2f2f2; --th: #f2f2f2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d1714; --surface: #14211c; --surface-2: #1b2b25; --ink: #e8efe9; --ink-2: #b2c2b8; --ink-3: #82958a;
  --line: #26372f; --line-strong: #345044; --forest: #5dbb8f; --forest-ink: #08140f; --forest-soft: #1c3a2e;
  --board: #08130f; --board-ink: #e9f1e9; --board-dim: #7f988b; --board-line: #1f3529;
  --signal: #f4b443; --signal-soft: #3d3016;
  --ok: #5cc78f; --ok-soft: #173a29; --warn: #f0b04c; --warn-soft: #3b2c12; --bad: #f08a78; --bad-soft: #42201b; --info: #93aef0; --info-soft: #1d2a48;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25); --shadow-lg: 0 24px 64px rgb(0 0 0 / .5);
  --tt: #f2f2f2; --th: #f2f2f2;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--forest); text-underline-offset: 3px; }
img, video { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }