/* Shared design tokens and primitives for both pages.
 *
 * Copyright (c) 2026 Jessica Sepulveda. All rights reserved.
 *
 * Link this before the page-specific stylesheet: console.css and landing.css
 * both build on the base rules here.
 */

:root{
  --ink:#16202E;
  --ink-2:#3D4B5C;
  --ink-3:#6B7A8D;
  --paper:#EDF0F4;
  --card:#FFFFFF;
  --rule:#D6DDE6;
  --floodlight:#FFB020;
  --escalate:#C4342B;
  --resolve:#1B6E55;

  /* Turf green carries "cleared / go / safe to act". It reads beautifully on
     the ink masthead (8:1) but only 2:1 on white, so on light backgrounds it
     appears as a fill, a wash or a rule -- never as text. Text on light stays
     --resolve, the same hue taken down to a readable value. --turf-edge is a
     hairline for turf fills that need a visible boundary on white. */
  --turf:#19CE85;
  --turf-edge:#0E9E63;
  --turf-wash:rgba(25,206,133,.15);
  /* --escalate is only 3:1 on ink, so the masthead gets a lifted red. */
  --siren:#FF7A6E;

  --shadow:0 1px 2px rgba(22,32,46,.06), 0 8px 24px rgba(22,32,46,.06);
}

*{box-sizing:border-box}

/* Each page sets its own font shorthand -- the console runs a denser 15px
   scale than the landing page's 16px reading scale. */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.board{
  font-family:"Barlow Condensed","IBM Plex Sans",sans-serif;
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}