/* Copied verbatim from ReTargetWebsite/src/styles/tokens.css at site commit
   0c3ce93 (2026-10-06). Everything below this comment is that file, byte for
   byte — change it on the site and re-copy, never here. App-only tokens and
   the app's tighter section rhythm are mappings in app.css (D18). */

/* re:target design tokens.
   Ported from design-source/tokens.css with the WCAG 2.1 AA corrections from
   HANDOFF.md §5 applied. Every changed line is marked `§5`.

   The system is: base ramps → semantic aliases → components reference only the
   aliases. Never let a component reach for a base ramp directly; that is what
   makes the dark scope work. */

:root{
/* ── Base ramps ───────────────────────────────────────────────
   Pine: the brand green. Deep, desaturated, forest-dark. Carries the product.
   Ember: burnt orange. Scarce — one per view, reserved for the primary action.
   Clay: olive-stone neutrals — cool paper up top, warm-dark olive below.
   Every surface, border and body text lives here. */
--pine-950:#08130E;--pine-900:#0D1F18;--pine-800:#12291F;--pine-700:#1A3B2C;
--pine-600:#24543E;--pine-500:#2F6B4F;--pine-400:#4A8E6C;--pine-300:#7FB89A;
--pine-200:#B7DCC8;--pine-100:#DCEEE4;--pine-050:#EFF7F2;

--ember-900:#5C2210;--ember-800:#7E3315;--ember-700:#A6431B;--ember-600:#C8551F;
--ember-500:#DE6526;--ember-400:#E9843F;--ember-300:#F2A873;--ember-200:#F8CDAC;
--ember-100:#FBE5D5;--ember-050:#FDF3EB;

--clay-950:#0F110C;--clay-900:#191C16;--clay-800:#272B23;--clay-700:#383E34;
--clay-600:#4F5649;--clay-500:#6C7466;--clay-450:#91968D;--clay-400:#98A091;
--clay-300:#C2C8BC;--clay-200:#D9DFD4;--clay-100:#E6EAE2;--clay-050:#F1F4EF;
--white:#FFFFFF;

/* Status hues — kept inside the earthy range, never neon.
   amber-650 / amber-700 are new: §5 needs two darker steps that the original
   ramp did not have. */
--amber-700:#8E6312;--amber-650:#947122;--amber-600:#A87516;
--amber-500:#C89A2F;--amber-100:#F7EBD0;
--brick-700:#8E2D22;--brick-600:#B03A2E;--brick-100:#F6DEDA;
--slate-600:#3C6E7A;--slate-100:#DDEBEE;

/* ── Semantic aliases — light surfaces (marketing site, app body) ── */
--surface-page:var(--clay-050);
--surface-card:var(--white);
--surface-sunken:var(--clay-100);
--surface-inset:var(--clay-050);
--surface-inverse:var(--pine-900);
--surface-accent-soft:var(--pine-050);
--surface-ember-soft:var(--ember-050);

--text-strong:var(--clay-900);
--text-body:var(--clay-700);
--text-muted:var(--clay-600);   /* §5 was clay-500 — 4.37 → 6.86 */
--text-faint:var(--clay-500);   /* §5 was clay-400 — 2.70 → 4.85 */
--text-on-dark:var(--clay-050);
--text-on-dark-muted:var(--pine-200);
--text-accent:var(--pine-600);
--text-ember:var(--ember-700);
--text-link:var(--pine-600);
--text-link-hover:var(--ember-700);

--border-hairline:var(--clay-200);
--border-default:var(--clay-300);
--border-strong:var(--clay-400);
--border-inverse:rgba(255,255,255,.14);
--border-accent:var(--pine-400);
/* §5 Interactive component boundaries only — inputs, selects, checkboxes,
   outline buttons. WCAG 1.4.11 requires 3:1 here and nowhere else. Card
   hairlines deliberately stay light; a card is not a control. */
--border-control:var(--clay-450);

--action-primary:var(--ember-700);        /* §5 was ember-600 — 4.40 → 6.10 */
--action-primary-hover:var(--ember-800);  /* §5 was ember-700 — → 8.86 */
--action-primary-press:var(--ember-900);  /* §5 was ember-800 */
--action-primary-text:var(--white);
--action-secondary:var(--pine-800);
--action-secondary-hover:var(--pine-700);
--action-secondary-press:var(--pine-900);
--action-secondary-text:var(--clay-050);

--focus-ring:var(--ember-600);
--focus-ring-inverse:var(--ember-400);

--status-ok-fg:var(--pine-600);--status-ok-bg:var(--pine-100);
--status-warn-fg:var(--amber-700);--status-warn-bg:var(--amber-100); /* §5 3.40 → 4.50 */
--status-block-fg:var(--brick-700);--status-block-bg:var(--brick-100);
--status-info-fg:var(--slate-600);--status-info-bg:var(--slate-100);
--status-neutral-fg:var(--clay-600);--status-neutral-bg:var(--clay-100);

/* ScoreRing bands. Semantic so the ring stays legible on dark cards — the
   original hard-coded pine-500 / amber-500 against pine-900, which is where
   the ring actually lives on the home hero and the report header. */
--score-ready-fg:var(--pine-500);--score-ready-track:var(--pine-100);
--score-mid-fg:var(--amber-650);--score-mid-track:var(--amber-100); /* §5 2.59 → 4.52 */
--score-low-fg:var(--brick-600);--score-low-track:var(--brick-100);
}

/* ── Dark scope ──────────────────────────────────────────────
   Applied to hero bands, the footer and report headers.
   Set data-theme="dark" on any container to flip the semantic layer. */
[data-theme="dark"]{
--surface-page:var(--pine-950);
--surface-card:var(--pine-900);
--surface-sunken:var(--pine-950);
--surface-inset:rgba(255,255,255,.04);
--surface-inverse:var(--clay-050);
--surface-accent-soft:rgba(74,142,108,.12);
--surface-ember-soft:rgba(222,101,38,.12);

--text-strong:var(--clay-050);
--text-body:var(--pine-100);
--text-muted:var(--pine-300);
--text-faint:var(--pine-400);
--text-accent:var(--pine-300);
--text-ember:var(--ember-300);
--text-link:var(--pine-200);
--text-link-hover:var(--ember-300);

--border-hairline:rgba(255,255,255,.10);
--border-default:rgba(255,255,255,.16);
--border-strong:rgba(255,255,255,.26);
--border-accent:var(--pine-500);
--border-control:rgba(255,255,255,.45); /* §5 outline button on dark — 1.56 → ≥3 */

--action-secondary:var(--clay-050);
--action-secondary-hover:var(--white);
--action-secondary-press:var(--clay-200);
--action-secondary-text:var(--pine-900);

--status-ok-fg:var(--pine-200);--status-ok-bg:rgba(74,142,108,.18);
--status-warn-fg:#E7C066;--status-warn-bg:rgba(200,154,47,.18);
--status-block-fg:#E79A8F;--status-block-bg:rgba(176,58,46,.20);
--status-info-fg:#9FC6CE;--status-info-bg:rgba(60,110,122,.20);
--status-neutral-fg:var(--pine-200);--status-neutral-bg:rgba(255,255,255,.06);

--score-ready-fg:var(--pine-300);--score-ready-track:rgba(255,255,255,.13);
--score-mid-fg:#E7C066;--score-mid-track:rgba(255,255,255,.13);
--score-low-fg:#E79A8F;--score-low-track:rgba(255,255,255,.13);

--focus-ring:var(--focus-ring-inverse);
}

:root{
--font-sans:"Instrument Sans Variable","Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"JetBrains Mono Variable","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--font-display:var(--font-sans);

--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;

/* Type scale — 1.25 major third above 18px, tighter below */
--fs-display-xl:64px;--lh-display-xl:1.02;--ls-display-xl:-.035em;
--fs-display-l:48px;--lh-display-l:1.06;--ls-display-l:-.03em;
--fs-display-m:36px;--lh-display-m:1.12;--ls-display-m:-.025em;
--fs-heading-l:28px;--lh-heading-l:1.2;--ls-heading-l:-.02em;
--fs-heading-m:22px;--lh-heading-m:1.27;--ls-heading-m:-.015em;
--fs-heading-s:18px;--lh-heading-s:1.35;--ls-heading-s:-.01em;
--fs-body-l:18px;--lh-body-l:1.6;--ls-body-l:-.005em;
--fs-body-m:15px;--lh-body-m:1.6;--ls-body-m:0;
--fs-body-s:13px;--lh-body-s:1.55;--ls-body-s:.002em;
--fs-caption:12px;--lh-caption:1.4;--ls-caption:.01em;
--fs-mono-m:14px;--lh-mono-m:1.55;
--fs-mono-s:12px;--lh-mono-s:1.5;
--fs-eyebrow:12px;--lh-eyebrow:1.2;--ls-eyebrow:.14em;

--measure-prose:66ch;
--measure-narrow:48ch;
}

:root{
/* 4px base grid. Named by step, not by t-shirt size. */
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;
--space-10:64px;--space-11:80px;--space-12:96px;--space-13:128px;

--gutter-page:24px;
--max-content:1180px;
--max-prose:720px;
--section-y:64px;        /* mobile-first: the 96px rhythm arrives at md */
--section-y-tight:48px;

/* Radii — small and deliberate. Nothing is a pill except tags and avatars. */
--radius-xs:3px;--radius-sm:5px;--radius-md:8px;--radius-lg:12px;
--radius-xl:18px;--radius-pill:999px;

--border-w:1px;
--border-w-thick:2px;
--control-h-sm:32px;
--control-h-md:40px;
--control-h-lg:48px;
/* WCAG 2.5.8 floor for anything clickable. */
--target-min:24px;
}

/* §10 — the full vertical rhythm only from md up. */
@media (min-width:768px){:root{
--section-y:96px;
--section-y-tight:64px;
}}

:root{
/* Shadows are warm (brown-tinted, never grey-blue) and shallow.
   Cards rest on hairlines; shadow is reserved for things that float. */
--shadow-none:none;
--shadow-hairline:0 0 0 1px var(--border-hairline);
--shadow-raised:0 1px 2px rgba(28,23,19,.06),0 1px 1px rgba(28,23,19,.04);
--shadow-card:0 2px 4px rgba(28,23,19,.05),0 8px 20px -12px rgba(28,23,19,.14);
--shadow-popover:0 8px 16px -6px rgba(28,23,19,.14),0 24px 48px -24px rgba(28,23,19,.28);
--shadow-modal:0 24px 64px -20px rgba(20,16,9,.42);
--shadow-inset-well:inset 0 1px 2px rgba(28,23,19,.06);

/* Texture: a 1px warm grid used on dark bands and empty states. */
--grid-dark:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
--grid-light:linear-gradient(rgba(61,51,43,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(61,51,43,.05) 1px,transparent 1px);
--grid-size:32px 32px;
}

:root{
--ease-standard:cubic-bezier(.2,.6,.25,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-in:cubic-bezier(.5,0,.9,.3);
--dur-instant:80ms;
--dur-fast:140ms;
--dur-base:200ms;
--dur-slow:320ms;
--dur-lazy:600ms;
--transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion:reduce){:root{
--dur-instant:0ms;
--dur-fast:0ms;
--dur-base:0ms;
--dur-slow:0ms;
--dur-lazy:0ms;
}}