/* ==========================================================================
   TokenRestake Design System
   Calm Dark Briefing Aesthetic — Charcoal Slate Canvas, Ink Light Typography, Cool Slate Accent
   No external CDNs, 100% accessible and readable with JS disabled
   ========================================================================== */

/* Display face
   -----------------------------------------------------------------------
   Source Serif 4, latin subset, one weight, self-hosted. 21KB, no third-party
   request, and it was already first in the stack below — shipping it makes
   that stack true on every platform instead of only where someone happens to
   have a good screen serif installed.

   SIL Open Font License 1.1; the licence travels with the font at
   /assets/fonts/LICENSE.e10247b1.txt, as the OFL requires.

   font-display: swap, so the heading renders immediately in the fallback and
   reflows once rather than holding the page blank. Only h1 and h2 use this
   family, so the reflow is small and above the fold.

   This needs `font-src 'self'` in the CSP; under default-src 'none' the file
   would otherwise be fetched and refused, and the page would look unchanged. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-700.3792b789.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark light;

  /* Color Palette - Calm Dark Briefing Theme */
  --bg-canvas: #0a0d12;
  --bg-surface: #161c26;
  --bg-subtle: #1f2733;
  --bg-card: #161c26;
  --bg-highlight: #2a3441;
  --bg-alert-soft: #1f1b14;
  --bg-danger-soft: #251619;
  /* The hero band sits one step off the canvas so the page opens on a surface
     rather than on the void, with a single soft light source above it. */
  --bg-hero: #141a24;
  --hero-glow: rgba(143, 175, 201, 0.12);

  --text-primary: #e8eaed;
  --text-secondary: #a3adb8;
  --text-muted: #99a5b2;   /* 4.73:1 on the darkest surface it sits on */
  --text-inverse: #0a0d12;
  
  --border-light: #384454;
  --border-medium: #46556a;
  --border-strong: #5a6b82;
  
  /* Two named ramps, and --accent-* aliases whichever one the section uses.
     Both are kept as literal colours rather than one aliasing the other,
     because every contrast check in the suite reads these by name: a token
     holding a var() it cannot resolve is a check that skips in silence, which
     is worse than one that fails.

     The reason there is a second ramp at all: one muted blue was doing every
     job, so a page explaining a mechanism and a page dissecting a failure
     looked the same. The warm one belongs to /incidents/. It is an ochre and
     not a red, because case files are post-mortems rather than warnings — the
     danger tokens still mean danger, and these sit 43 RGB away from them. */
  --accent-cool: #8fafc9;          /* Cool Slate */
  --accent-cool-hover: #b8d1e5;
  --accent-cool-soft: #15212e;
  --accent-cool-border: #3a5570;

  --accent-warm: #d9a86b;
  --accent-warm-hover: #e8c08a;
  --accent-warm-soft: #211a10;
  --accent-warm-border: #5e4a2c;

  --accent-primary: var(--accent-cool);
  --accent-hover: var(--accent-cool-hover);
  --accent-soft: var(--accent-cool-soft);
  --accent-border: var(--accent-cool-border);
  
  --warning-primary: #dcb162;      /* Muted Amber */
  --warning-border: #483c24;
  --danger-primary: #d98b8b;       /* Muted Red-Brown */
  --danger-border: #5e3036;
  
  /* Typography System */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  /* Display face. The old stack listed Times New Roman fourth, and on Windows —
     where it resolved for this site's own author — that is exactly what it
     picked: the most dated typeface available. Measured in the browser, this
     machine has Constantia, Georgia, Cambria, Palatino and Sitka, all of which
     are screen serifs designed for text. Times is kept only as the last resort
     before the generic. Costs no bytes and needs no CSP change. */
  --font-serif: "Source Serif 4", Charter, "Iowan Old Style", "Source Serif Pro",
                Constantia, Georgia, Cambria, "Sitka Text", "Palatino Linotype",
                Palatino, "Book Antiqua", "Times New Roman", serif;
  --font-display: var(--font-serif);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-display: 2.5rem; /* 40px — h1 at the wide breakpoint */
  /* The hero headline was 40px on a 1680px screen, which reads as a document
     title rather than an opening statement. This one scales with the viewport
     instead of stepping once, so it is 36px on a phone and 68px on a desktop
     without a jump in between. The clamp is what keeps both ends sane. */
  --text-hero: clamp(2.25rem, 1.25rem + 3.2vw, 4.25rem); /* 36px -> 68px */

  /* Tracking by role. There were five ad-hoc values doing three jobs. */
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.08em;
  
  --leading-display: 1.15;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  
  /* Spacing & Layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  
  --max-width-content: 48rem;
  --max-width-wide: 52rem;
  /* Three steps that are actually distinguishable. 10px and 12px were not. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Elevation. On a dark theme a raised panel reads as a soft shadow below plus
     a one-pixel lift along the top edge, which is what the inset highlight is
     for. Before this the site had no shadow anywhere, so nothing sat above
     anything else. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50);
}

/* ==========================================================================
   Light theme
   Follows the system preference. There is no manual toggle because a toggle
   needs a script, and the CSP is `script-src` umami only — one would ship and
   do nothing.

   Designed to the same two metrics as the dark palette: surfaces separated by
   perceptual lightness, text by WCAG contrast, both asserted in
   test-verification.js. In light mode the relationship inverts — a card is
   lighter than the page, not darker — which the ladder check handles because
   it compares absolute difference.
   ========================================================================== */
@media (prefers-color-scheme: light) {
  :root {
    --bg-canvas: #f2f4f7;
    --bg-surface: #ffffff;
    --bg-subtle: #e8ebf0;
    --bg-card: #ffffff;
    --bg-highlight: #dce1e8;
    --bg-alert-soft: #f8ecc6;
    --bg-danger-soft: #fae0dd;
    --bg-hero: #ffffff;
    --hero-glow: rgba(45, 93, 134, 0.10);

    --text-primary: #121a24;
    --text-secondary: #4a5663;
    --text-muted: #555f6b;
    --text-inverse: #ffffff;

    --border-light: #c9d1db;
    --border-medium: #aab6c4;
    --border-strong: #8995a5;

    --accent-cool: #2d5d86;
    --accent-cool-hover: #1f4a6d;
    --accent-cool-soft: #dfeaf4;
    --accent-cool-border: #9dbdd8;

    /* #8a5a1f was the first choice here and measured 4.48:1 on the lightest
       bed — a hair under, and invisible to the eye. This one is 5.17. And
       #f8efdf was the first soft tint, 1.37 L* off the canvas: a panel nobody
       could see. This one is 3.72, matching the cool tint's 3.96. */
    --accent-warm: #7d5214;
    --accent-warm-hover: #5e3c0e;
    --accent-warm-soft: #f4e8d2;
    --accent-warm-border: #d9bd8a;

    --accent-primary: var(--accent-cool);
    --accent-hover: var(--accent-cool-hover);
    --accent-soft: var(--accent-cool-soft);
    --accent-border: var(--accent-cool-border);

    --warning-primary: #6b4e14;
    --warning-border: #d9bf7a;
    --danger-primary: #8a2f2f;
    --danger-border: #e2a9a3;

    /* No white inset highlight on a light surface: there is nothing to lift
       away from. Shadows are softer because the contrast against the page is
       already doing the work. */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.12);
  }
}

/* Skip Link — off-screen until focused, above the sticky header when shown */
.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background-color: var(--bg-highlight);
  color: var(--text-primary);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Keep the skip-link target clear of the sticky header */
#main-content {
  scroll-margin-top: 80px;
}

/* One designed focus ring for the whole site. This used to be the browser
   default outline, which is the clearest sign that nobody had been through the
   details. Keyboard users get a visible ring; mouse users never see it. */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  background-color: var(--bg-canvas);
  color: var(--text-primary);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Defaults */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-heading);
}

/* h1 and h2 carry the display face. h3 and below stay in the sans, where
   technical density matters more than voice. */
h1, h2 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
}

h1 {
  line-height: var(--leading-display);
}

h1 {
  font-size: var(--text-3xl);
  margin-top: var(--space-2);
}

@media (min-width: 640px) {
  h1 {
    font-size: var(--text-display);
  }
}

h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-12);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-6);
}

p {
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

strong {
  color: var(--text-primary);
  font-weight: 600;
}

em {
  font-style: italic;
}

a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

a:hover, a:focus {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

ul, ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
  color: var(--text-secondary);
}

li {
  margin-bottom: var(--space-2);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-light);
  margin: var(--space-8) 0;
}

blockquote {
  border-left: 3px solid var(--accent-primary);
  background-color: var(--accent-soft);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

blockquote p:last-child {
  margin-bottom: 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--bg-subtle);
  padding: 0.15em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

/* Layout Utilities */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: var(--max-width-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-wide {
  width: 100%;
  max-width: var(--max-width-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.main-content {
  flex: 1 0 auto;
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}

/* Each section names its ramp. Nothing inside needs to know which: the four
   aliases are redefined here and inheritance carries them down to every link,
   left border, pill and rule in the section. The header and footer sit
   outside <main>, so the chrome keeps the site's own accent while the content
   takes on the section's.

   Guides restate the cool ramp rather than relying on the default. It is the
   same four lines either way, and the mapping from section to colour is then
   readable in one place instead of being half here and half implied. */
.section-guides {
  --accent-primary: var(--accent-cool);
  --accent-hover: var(--accent-cool-hover);
  --accent-soft: var(--accent-cool-soft);
  --accent-border: var(--accent-cool-border);
}

.section-incidents {
  --accent-primary: var(--accent-warm);
  --accent-hover: var(--accent-warm-hover);
  --accent-soft: var(--accent-warm-soft);
  --accent-border: var(--accent-warm-border);
}

/* Header & Navigation */
.site-header {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text-primary);
  letter-spacing: var(--tracking-heading);
}

.site-logo:hover {
  color: var(--accent-primary);
  text-decoration: none;
}

.logo-badge {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 2px 6px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-1) 0;
  position: relative;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a.active {
  color: var(--accent-primary);
  text-decoration: none;
}

.site-nav a.active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent-primary);
}

/* Footer */
.site-footer {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-light);
  padding: var(--space-12) 0 var(--space-8) 0;
  margin-top: auto;
  font-size: var(--text-sm);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: space-between;
}

@media (min-width: 640px) {
  .footer-top {
    flex-direction: row;
    align-items: center;
  }
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.footer-nav a {
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

.footer-contact {
  color: var(--text-muted);
}

.footer-contact a {
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-disclaimer-banner {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* ==========================================================================
   Reduced Motion
   Smooth scrolling and colour fades are preferences, not content.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Print
   The legal pages are the ones readers actually print or save as PDF, so they
   get ink-friendly colours, no chrome, and visible link targets.
   ========================================================================== */
@media print {
  /* Redefine the tokens rather than overriding component by component. The
     page was resetting only body, so every card, callout and table still
     printed with the dark surfaces — a page of black blocks on white paper. */
  :root {
    --bg-canvas: #fff;
    --bg-surface: #fff;
    --bg-card: #fff;
    --bg-subtle: #fff;
    --bg-highlight: #fff;
    --bg-alert-soft: #fff;
    --bg-danger-soft: #fff;
    --accent-soft: #fff;
    --bg-hero: #fff;
    --hero-glow: transparent;

    --text-primary: #000;
    --text-secondary: #1a1a1a;
    --text-muted: #333;
    --text-inverse: #fff;

    --border-light: #999;
    --border-medium: #777;
    --border-strong: #555;
    --accent-border: #999;
    --warning-border: #999;
    --danger-border: #999;

    --accent-cool: #000;
    --accent-cool-hover: #000;
    --accent-cool-soft: #fff;
    --accent-cool-border: #999;
    --accent-warm: #000;
    --accent-warm-hover: #000;
    --accent-warm-soft: #fff;
    --accent-warm-border: #999;
    --accent-primary: #000;
    --accent-hover: #000;
    --warning-primary: #000;
    --danger-primary: #000;

    /* Ink, not pixels. */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }

  html, body {
    background-color: #fff;
    color: #000;
  }

  /* Navigation cannot be followed on paper. */
  .site-header,
  .breadcrumbs,
  .guide-pagination,
  .footer-nav,
  .page-toc,
  .skip-link,
  .icon-sprite,
  .hero-actions {
    display: none;
  }

  .site-wrapper,
  .container,
  .main-content {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* A printed page cannot be clicked, so spell out external destinations */
  .main-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    word-break: break-all;
  }

  .footer-disclaimer-banner {
    border: 1px solid #000;
    padding: var(--space-2);
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  table,
  .definition-box,
  .notice-box,
  .diagram-wrapper,
  .glossary-entry {
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Wide Viewports: the page shell
   On a 3440px ultrawide the header band spans the whole screen while its logo
   and nav were crammed into the middle 768px, which reads as broken rather
   than as a narrow measure. The chrome now widens with the screen while the
   reading column stays where it is, because a line of text past roughly 75
   characters is harder to read, not easier.

   These are caps, not floors: `width: 100%` still applies below them, so a
   narrow window is unaffected and no breakpoint can cause overflow.
   test-verification.js checks that each cap fits inside its own breakpoint.

   The steps match the --bleed steps in components.css, because the shell must
   never be narrower than the tables and diagrams inside it. Prose, then the
   structural blocks, then the chrome: three concentric widths, in that order.
   The suite checks that ordering holds at every breakpoint.
   ========================================================================== */
@media screen and (min-width: 1100px) {
  .header-inner,
  .footer-inner,
  .hero-inner {
    max-width: 64rem;
  }
}

@media screen and (min-width: 1500px) {
  .header-inner,
  .footer-inner,
  .hero-inner {
    max-width: 76rem;
  }
}

@media screen and (min-width: 1900px) {
  .header-inner,
  .footer-inner,
  .hero-inner {
    max-width: 88rem;
  }
}

@media screen and (min-width: 2600px) {
  .header-inner,
  .footer-inner,
  .hero-inner {
    max-width: 100rem;
  }
}