/* =========================================================================
   tokens.css — Roofage design tokens (StormView-derived dark design system).
   No build step. No CDN. Everything the app renders must be styleable from
   this cascade alone — the CSP is style-src 'self' with no 'unsafe-inline',
   so any inline <style> block or style="" attribute on any page is a bug in
   that page, not something these files can fix for it.

   LOAD ORDER (every HTML <head>):
     1. tokens.css      <- this file (custom properties + @font-face; no
                            selectors that render anything, so it is safe
                            to load first with no cascade risk)
     2. base.css
     3. layout.css
     4. components.css
     5. header.css
     6. pages.css
     7. legacy.css
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts — self-hosted, latin-subset woff2, fetched from the Google Fonts
   CSS API and re-served from /static/fonts/ so the browser never talks to
   fonts.gstatic.com (CSP has no font-src exception for it, and doesn't need
   one). If these files are ever missing, the family names below simply fail
   to match and every --font-* stack falls through to its system keyword —
   nothing else in this file references a family name directly.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/barlow-400.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/barlow-600.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/barlow-700.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/barlow-cond-600.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/barlow-cond-700.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plex-mono-400.woff2) format("woff2");
}

/* -------------------------------------------------------------------------
   Tokens — verbatim from StormView tokens/colors.css, dark mapping.
   Ratios in comments are against --surface-page unless noted; see WP-A's
   final report for independent verification of these numbers.
   ------------------------------------------------------------------------- */
:root {
  /* raw ramp — verbatim from StormView tokens/colors.css */
  --red-50:#FFF3F3; --red-100:#FFE2E2; --red-200:#FFBDBD; --red-500:#FF0707;
  --red-600:#E30B0B; --red-700:#C71F1F; --red-800:#9E1414;
  --orange-500:#FF8500; --orange-600:#E96700; --orange-700:#C85000; --orange-800:#A83F00;
  --ink-950:#0F1216; --ink-900:#14171C; --ink-800:#1D2128; --ink-700:#2A2F38;
  --ink-600:#3C424E; --ink-500:#565E6C; --ink-400:#78808F; --ink-300:#A3AAB6;
  --ink-200:#CDD2DA; --ink-100:#E6E9EE; --ink-50:#F3F5F8; --white:#FFFFFF;

  /* dark aliases — what components actually reference */
  --surface-page:    var(--ink-950);   /* #0F1216 */
  --surface-card:    var(--ink-900);   /* #14171C */
  --surface-raised:  var(--ink-800);   /* #1D2128  menus, chips, dropdowns */
  --surface-sunken:  #0A0C0F;          /* code blocks, table zebra */
  --border-subtle:   var(--ink-800);
  --border-default:  var(--ink-700);
  --border-strong:   var(--ink-600);
  --text-heading:    var(--ink-50);    /* 16.8:1 */
  --text-body:       var(--ink-100);   /* 14.9:1 */
  --text-muted:      var(--ink-300);   /*  8.2:1 */
  --text-faint:      var(--ink-400);   /*  5.1:1 — smallest allowed for text */
  --brand:           var(--orange-500); /* wordmark, focus ring, active nav marker */
  /* Bright orange carries accents on the dark surface. Buttons use a darker
     orange so normal-size white labels retain WCAG AA contrast. */
  --brand-fill:      var(--orange-700); /* 4.56:1 with white */
  --brand-fill-hover:var(--orange-800); /* 6.22:1 with white */
  --text-on-brand:   var(--white);
  --brand-text:      #FFAA55;           /* orange text on dark: 9.95:1 */

  /* semantic — lightened from StormView's light-mode hues to clear 4.5:1 on ink-950 */
  --success:#35C77D; --success-soft:#0F2A1D;
  --warning:#E9A23B; --warning-soft:#2C1F0C;
  --danger: #FF5A4E; --danger-soft: #2E1210;
  --info:   #4FA3E8; --info-soft:   #0D2033;

  --focus-ring: 0 0 0 3px rgba(255,7,7,.35);
  --shadow-card:    0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
  --shadow-overlay: 0 12px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);
  --ease-out: cubic-bezier(.2,.8,.3,1); --dur-fast:120ms; --dur-med:200ms;

  --font-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px; --text-lg:20px;
  --text-xl:24px; --text-2xl:32px; --text-3xl:44px; --text-4xl:64px;
  --leading-tight:1.05; --leading-snug:1.25; --leading-normal:1.5;
  --tracking-caps:.08em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  --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;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px;
  --container-max:1200px;
}