/* ============================================================================
   RE Reset design system v2
   Locked 2026-07-31. Canonical doc: .claude/context/re-reset-brand.md

   Every RE Reset page links THIS file. Do not re declare these tokens in a
   per page <style> block. That is how fifteen files drifted apart.

   <link href="https://api.fontshare.com/v2/css?f[]=editorial-new@400,500&f[]=satoshi@400,500,700&display=swap" rel="stylesheet">
   <link href="/design/re-reset.css" rel="stylesheet">
   ============================================================================ */

/* ---------------------------------------------------------------- tokens --- */
:root{
  /* Terracotta: the ONLY color that carries full chroma. Actions only. */
  --terracotta-100: oklch(95% 0.025 45);
  --terracotta-200: oklch(88% 0.06  45);
  --terracotta-400: oklch(72% 0.13  45);
  --terracotta-600: oklch(60% 0.17  45);
  --terracotta-800: oklch(40% 0.12  45);

  /* Dark green: near neutral. Lightness does the work, not chroma. */
  --green-100: oklch(93% 0.012 175);
  --green-300: oklch(70% 0.030 175);
  --green-600: oklch(38% 0.045 175);
  --green-800: oklch(26% 0.035 175);
  --green-900: oklch(18% 0.030 175);

  /* Gold: high chroma, small scale only. A spark, never a field. */
  --gold-400: oklch(84% 0.11 80);
  --gold-600: oklch(75% 0.14 80);

  /* Sand: surface only. Never decoration. */
  --sand-50:  oklch(98% 0.008 65);
  --sand-100: oklch(94% 0.015 65);
  --sand-200: oklch(90% 0.020 65);
  --sand-300: oklch(85% 0.025 65);

  /* Semantic roles */
  --ink:       var(--green-900);
  --ink-muted: oklch(45% 0.018 175);
  --surface:   var(--sand-50);
  --surface-2: var(--sand-100);
  --panel:     #fff;
  --rule:      oklch(87% 0.014 65);

  /* Shadows tint green, never black. Accent only, never the default card look. */
  --shadow-sm: 0 1px 2px oklch(18% 0.03 175 / 0.06);
  --shadow-md: 0 2px 8px oklch(18% 0.03 175 / 0.08);

  /* Type */
  --font-display: "Editorial New", Georgia, serif;
  --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.83rem, 0.8rem  + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem,    0.95rem + 0.25vw, 1.0625rem);
  --step-1:  clamp(1.2rem,  1.12rem + 0.4vw,  1.4rem);
  --step-2:  clamp(1.5rem,  1.32rem + 0.9vw,  2rem);
  --step-3:  clamp(2rem,    1.65rem + 1.8vw,  2.9rem);
  --step-4:  clamp(2.6rem,  2rem    + 3.2vw,  4.2rem);

  /* Space, 8px grid */
  --sp-xs: 8px; --sp-sm: 16px; --sp-md: 24px;
  --sp-lg: 48px; --sp-xl: 80px; --sp-2xl: 120px;

  /* One radius. No pills. */
  --radius: 4px;
  --radius-lg: 8px;

  --measure: 68ch;
  --container: 1180px;

  /* Motion. Never longer than these. */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
}

/* Dark mode shares hue and chroma anchors, shifts lightness only.
   Never invert to pure black. */
:root[data-theme="dark"]{
  --ink:       var(--sand-100);
  --ink-muted: oklch(72% 0.02 175);
  --surface:   var(--green-900);
  --surface-2: var(--green-800);
  --panel:     var(--green-800);
  --rule:      oklch(100% 0 0 / 0.14);
}

/* ------------------------------------------------------------- baseline --- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}
h1{ font-size: var(--step-4); letter-spacing: -0.025em; }
h2{ font-size: var(--step-3); letter-spacing: -0.02em; }
h3{ font-size: var(--step-2); letter-spacing: -0.015em; }
h4{ font-size: var(--step-1); letter-spacing: -0.015em; }

p{ margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child{ margin-bottom: 0; }

a{ color: var(--terracotta-800); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Every figure gets tabular numbers. We print a lot of them. */
.num, td, th, time, [data-num]{ font-variant-numeric: tabular-nums; }

code, pre{ font-family: var(--font-mono); font-size: 0.9em; }

/* Focus is never removed. Required on every interactive element. */
:focus-visible{
  outline: 2px solid var(--terracotta-600);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- layout --- */
.rr-wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}
.rr-section{
  padding-block: clamp(56px, 7vw, 104px);
  border-bottom: 1px solid var(--rule);
}
.rr-section--alt{ background: var(--surface-2); }
.rr-section--dark{
  background: var(--green-900);
  color: var(--sand-100);
  border-bottom: none;
}
.rr-section--dark h1,
.rr-section--dark h2,
.rr-section--dark h3{ color: var(--sand-50); }
.rr-section--dark p{ color: oklch(82% 0.02 175); }

/* Asymmetric default. One item leads, others support.
   Do NOT reach for three equal columns. */
.rr-grid-lead{ display: grid; gap: var(--sp-sm); }
@media (min-width: 640px){
  .rr-grid-lead{ grid-template-columns: 1.7fr 1fr; }
}
.rr-stack{ display: grid; gap: var(--sp-sm); align-content: start; }

/* ---------------------------------------------------------- components --- */

/* Eyebrow label. OCCASIONAL use. Not above every section. */
.rr-eyebrow{
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta-800);
  margin: 0 0 var(--sp-md);
}
.rr-section--dark .rr-eyebrow{ color: var(--gold-400); }

.rr-lede{ font-size: var(--step-1); color: var(--ink-muted); }

/* Card. 1px border and 4px radius. No shadow at rest. */
.rr-card{
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .rr-card:hover{ border-color: var(--terracotta-400); box-shadow: var(--shadow-md); }
}
.rr-card--lead{ background: var(--green-800); color: var(--sand-100); border-color: transparent; }
.rr-card--lead h4{ color: #fff; }
.rr-card--lead p{ color: oklch(80% 0.02 175); }

/* Number instead of a generic thin line icon. */
.rr-card__num{
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--gold-600);
  margin-bottom: var(--sp-sm);
}
.rr-card--lead .rr-card__num{ color: var(--gold-400); }

/* Buttons. Background shifts only. No lift, no scale on hover. */
.rr-btn{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 14px 24px;
  min-height: 44px;              /* WCAG 2.2 target size */
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.rr-btn--primary{ background: var(--terracotta-600); color: #fff; }
.rr-btn--primary:hover{ background: var(--terracotta-400); }
.rr-btn--secondary{ background: transparent; border-color: var(--green-600); color: var(--green-900); }
.rr-btn--secondary:hover{ background: var(--green-900); color: var(--sand-50); }
.rr-btn:active{ transform: scale(0.97); }
.rr-btn--lg{ padding: 18px 32px; min-height: 52px; }
.rr-section--dark .rr-btn:focus-visible{ outline-color: var(--gold-400); }

/* Real numbers, stated plainly. Beats a chart.
   NEVER populate this with a figure we cannot prove. */
.rr-stats{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  padding-block: var(--sp-md);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rr-stat b{
  display: block;
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rr-stat span{
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Hero. Flat dark surface, one gold hairline.
   No pill badge, no pulsing dot, no radial glows. */
.rr-hero{
  background: var(--green-900);
  color: var(--sand-100);
  border-top: 2px solid var(--gold-600);
  border-radius: var(--radius);
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 48px);
}
.rr-hero h1{ color: var(--sand-50); max-width: 24ch; margin-bottom: var(--sp-md); }
.rr-hero p{ color: oklch(82% 0.02 175); }

/* Tables, for SOWs and portals. */
.rr-table{ width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.rr-table th{
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}
.rr-table td{ padding: 12px; border-bottom: 1px solid var(--rule); }
.rr-table tr:last-child td{ border-bottom: none; }

/* Wide content scrolls in its own box. The page body never scrolls sideways. */
.rr-scroll-x{ overflow-x: auto; }

/* ---------------------------------------------------------- reveal (opt) --- */
/* Native scroll driven, no JS. Reserve for one or two moments per page.
   Do NOT apply to every element. Uniform fade up on everything is the tell. */
@supports (animation-timeline: view()){
  .rr-reveal{
    animation: rr-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
}
@keyframes rr-fade-up{
  from{ opacity: 0; transform: translateY(20px); }
  to  { opacity: 1; transform: none; }
}

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

/* Print, for SOWs saved as PDF. */
@media print{
  body{ background: #fff; color: #000; }
  .rr-section{ border: none; page-break-inside: avoid; }
  .rr-btn{ display: none; }
}