/* RebelPSA design tokens — single source of truth for every other sheet.

   Contrast-checked pairs (WCAG 2.1 AA). Recomputed from the sRGB formula
   2026-08-12; five of the previous figures were arithmetically wrong (all in the
   passing direction, so no verdict changed, but they must not be quoted).

   ON LIGHT
     #1A1A1A on #FFFFFF  = 17.40:1  ✓ body
     #1A1A1A on #FFF5F5  = 16.27:1  ✓
     #494949 on #FFFFFF  =  9.00:1  ✓ body muted        (was recorded as 7.85)
     #494949 on #FFF5F5  =  8.42:1  ✓                   (was recorded as 7.36)
     #C41C1C on #FFFFFF  =  5.95:1  ✓ links on light
     #C41C1C on #FFF5F5  =  5.56:1  ✓

   ON DARK — measure against the BRIGHTEST point of the band, not the flat token.
   Every dark band is a gradient ending at --color-primary; --gradient-primary
   ends brighter still at --color-gradient-end.
     #FFFFFF on #C41C1C  =  5.95:1  ✓ white text on solid primary
     #FFFFFF on #D63A3A  =  4.64:1  ✓ white on the gradient end (recorded 4.55)
     rgba(255,255,255,.85) on #1A0D0D = 13.75:1 ✓        (was recorded as ~14.5)
     rgba(255,255,255,.85) on #D63A3A =  3.73:1 ✗ — which is why the hero's
       last stat tile takes solid white instead; see sections.css.
     #FFB4B4 on #C41C1C  =  3.52:1  ✓ 3:1 large-text/non-text bar only
     #FFB4B4 on #1A0D0D  = 11.23:1  ✓
*/
:root {
	/* The theme has exactly one scheme. Declaring it stops dark-OS browsers from
	   rendering UA form controls and scrollbars in the dark palette against
	   these hardcoded light surfaces. */
	color-scheme: light;

	/* Brand */
	--color-primary: #C41C1C;
	--color-primary-deep: #A31717;
	--color-gradient-end: #D63A3A;       /* AA-safe gradient end for white button text */
	--color-dark: #1A0D0D;
	/* Gradient-only pair. --color-dark stays exactly as it is: it is the text and
	   flat-fill near-black and half the site depends on it. These two exist purely
	   to fix how the dark bands ramp.
	   --color-grad-dark is the same darkness as --color-dark (v 9.4% vs 10.2%) with
	   the red pulled out (s 29% vs 50%), so the darkest part of a band reads as
	   dark rather than as dark RED.
	   --color-grad-mid is a mid-ramp red placed early in each gradient. Without it
	   a dark-to-red ramp spends most of its length climbing saturation without
	   gaining any brightness, which is the dried-blood look: measured across
	   --gradient-hero, 62.7% of its length sat under 28% value with over 30%
	   saturation. With these two it is 17.9%. */
	--color-grad-dark: #181111;
	--color-grad-mid: #8E1A1A;
	--color-tint: #FFF5F5;
	--color-white: #FFFFFF;

	/* Text */
	--color-body: #1A1A1A;
	--color-body-muted: #494949;         /* replaces design's rgba(26,26,26,.7) */
	--color-on-dark: #FFFFFF;
	--color-on-dark-muted: rgba(255, 255, 255, 0.85);

	/* LARGE text and non-text marks on dark only — never body copy, never links.
	   Was #E86A6A, which measured 6.05:1 against flat #1A0D0D and was verified
	   there, but every dark band is a GRADIENT running up to --color-primary and
	   the accent was used across its whole length: on #C41C1C it measured
	   1.90:1, i.e. below even the 3:1 non-text bar, and the code already recorded
	   that number. #FFB4B4 is the least pale value that clears 3:1 at the
	   brightest point of the band with real margin.
	     #FFB4B4 on #1A0D0D = 11.23:1   #FFB4B4 on #8E1A1A = 5.38:1
	     #FFB4B4 on #181111 = 11.04:1   #FFB4B4 on #C41C1C =  3.52:1  (3:1 bar)
	   Keeping #E86A6A instead would have meant capping the gradients at #7A1212
	   to reach 3.49:1 — the accent survives, the band's red does not. */
	--color-accent-on-dark: #FFB4B4;

	/* Links on dark are body copy and answer to the 4.5:1 bar, which NOTHING in
	   the red family reaches against #C41C1C — white is 5.95:1 there and is the
	   only passing option, so links on dark are white and carry an underline to
	   stay distinguishable from the text around them without relying on colour
	   (1.4.1). This is why it is a separate token from the accent above. */
	--color-link-on-dark: #FFFFFF;

	/* Surfaces */
	--color-card: #FFFFFF;
	--color-border: rgba(0, 0, 0, 0.10);
	--color-border-dark: rgba(255, 255, 255, 0.14);
	--color-border-card: rgba(196, 28, 28, 0.14);       /* V2 card border at rest */
	--color-border-card-hover: rgba(196, 28, 28, 0.55); /* V2 card border on hover */
	--color-input-bg: #F3F3F5;

	/* Paper-grain surface tiles (supplied masters). Each averages to the
	   flat token it pairs with, so these are *fills*, not overlays: use them as
	   the top background layer with the token colour underneath as fallback.
	   Only for surfaces that are a flat token — a gradient section would lose
	   its gradient, and the grain is too faint to blend over one. Tiled at the
	   masters' natural 512px, which is the period they wrap on exactly; any
	   background-size would resample the noise and lose it. */
	--surface-grain-light: url("../img/textures/surface-grain-light.webp");
	--surface-grain-dark: url("../img/textures/surface-grain-dark.webp");

	/* Gradients */
	--gradient-primary: linear-gradient(90deg, var(--color-primary), var(--color-gradient-end));
	/* Two separate problems, two different fixes.
	   The murky stretch was overwhelmingly a --gradient-hero problem: its mid stop
	   sat at 55% and was DARKER than a linear ramp, stalling the climb so 62.7% of
	   the band was dark-and-saturated at once. --gradient-dark and -sym were only
	   ~27% murky, all of it in their short dark ends.
	   So only the hero gets a mid stop. The other two just swap in the desaturated
	   dark end, which is what actually answers "too dark RED" — same darkness, the
	   red pulled out of it — without moving a midpoint. That matters: an earlier
	   mid red on --gradient-dark brightened exactly where the solution band's red
	   headline sits and took it from 4.7:1 to 2.78:1. */
	--gradient-dark: linear-gradient(135deg, var(--color-grad-dark), var(--color-primary));
	/* Hero's mid stop sits much later than the other two because it is the only
	   band with large --color-accent-on-dark text across its middle (the red
	   headline segment). At 45% that text measured 2.56:1 against a 3:1 bar; at
	   70% the ramp still cuts the murky stretch from 62.7% to 27.9%. */
	--gradient-hero: linear-gradient(135deg, var(--color-grad-dark) 0%, var(--color-grad-mid) 70%, var(--color-primary) 100%);
	--gradient-dark-sym: linear-gradient(135deg, var(--color-grad-dark) 0%, var(--color-primary) 50%, var(--color-grad-dark) 100%);

	/* Shape */
	--radius-sm: 8px;
	--radius: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 9999px;

	/* Type */
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: "Barlow", "Barlow-fallback", var(--font-sans);
	--font-heading: "Barlow Condensed", "Barlow Condensed-fallback", "Arial Narrow", var(--font-sans);
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);
	--text-4xl: clamp(2rem, 1.4rem + 2.8vw, 3rem);
	--text-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);
	--leading-tight: 1.15;
	--leading-normal: 1.6;

	/* Layout */
	--container-max: 80rem;              /* max-w-7xl */
	--container-pad: 1rem;
	--section-pad: 4rem;
	--nav-h: 5rem;                       /* h-20 */
	/* Height of the sticky chip rail on /benefits/, so anchor offsets can name it
	   instead of hiding a constant inside a calc. Measured, not guessed. The eight
	   chips need ~1272px to hold one row while the wrap rule starts at 64rem, so
	   between those widths the rail is two rows and nearly twice as tall. The
	   switch below is deliberately set at 80rem rather than at the real 1272px
	   threshold: that threshold moves with the label strings and the loaded font,
	   and erring on the tall side only adds air under the rail, while erring short
	   parks the target heading behind it. Always round up. */
	--subnav-h: 4rem;                    /* 64px: one row at mobile chip sizing */

	/* Effects */
	/* V2 "Structured Stamp" hard offsets — flat, print-like, no blur.
	   The old --shadow-card soft blur is gone; its three users (.table-scroll,
	   .legal-document, .legal-layout__sticky) were the last blurred boxes on the
	   site and now carry --shadow-stamp. Nothing in this theme blurs a shadow. */
	/* Light-surface set. Offset axis encodes what the box is: two-axis (Npx Npx)
	   is an object lying ON the page, one-axis (0 Npx) is a control standing UP
	   off it. Magnitude encodes scale — lg for the one hero panel per page, plain
	   for cards and full-width slabs, btn/chip for controls.
	   Hover invariant, and the one thing to preserve when editing any of these:
	   the shadow delta must equal the transform delta, so the shadow's OUTER edge
	   never moves. Card -3px/6->9, button -2px/5->7, press +3px/5->2,
	   chip -1px/3->4, chip press +2px/3->1. */
	--shadow-stamp-lg: 8px 8px 0 rgba(26, 13, 13, 0.96);
	--shadow-stamp: 6px 6px 0 rgba(26, 13, 13, 0.96);
	--shadow-stamp-hover: 9px 9px 0 rgba(26, 13, 13, 0.96);
	--shadow-stamp-btn: 0 5px 0 var(--color-dark);
	--shadow-stamp-btn-red: 0 5px 0 var(--color-primary);
	--shadow-stamp-chip: 0 4px 0 var(--color-primary);

	/* Dark-surface mirror. Translucent black, so it darkens whatever is behind it
	   by a ratio rather than aiming at one absolute colour — the dark bands are
	   gradients running #1A0D0D -> #C41C1C and no fixed ink suits both ends.
	   A light ink was tried and is wrong on principle: a shadow lighter than its
	   surface reads as a light leak or a bevel, not as a shadow.
	   Consequence to know: on the near-black end this is nearly invisible (1.06:1)
	   because nothing meaningful is darker than #1A0D0D, and it reaches ~2.4:1
	   where the gradient turns red. That falloff is the physically honest result —
	   a shadow fading where the surface is already dark — so the treatment is
	   carried by the 2px border on those bands and by the offset on the redder
	   ones. No -hover variant: every dark-surface stamp here is a static panel. */
	--shadow-stamp-lg-dark: 8px 8px 0 rgba(0, 0, 0, 0.55);
	--shadow-stamp-dark: 6px 6px 0 rgba(0, 0, 0, 0.55);
	/* How far down the viewport the fixed header starts. 0 for a visitor; 32px
	   when the editor admin bar is present above it. Everything that has to clear
	   the header reads this instead of assuming the header is at the top: the
	   sticky sub-nav rail, the sticky legal sidebar and the global anchor
	   scroll-margin. Set once in layout.css. Without it the rail sticks 32px too
	   high and hides behind the header. */
	--chrome-top: 0px;

	--transition: 200ms ease-out;   /* matches Figma SMART_ANIMATE 200ms EASE_OUT */
	--transition-slow: 300ms ease-out;

	/* The :active press. Snaps rather than eases — a control that takes the hover
	   pace to go down does not feel pressed. It was the one timing in the theme
	   spelled as a literal, repeated across six rules in four sheets.
	   Anything overriding it must keep the specificity notes in layout.css intact:
	   several of those rules exist only to win back the press speed from a
	   higher-specificity transition list, and the token does not change that. */
	--transition-press: 80ms;

	/* How long a nav dropdown stays open after the pointer leaves it. Long enough
	   to cross the gap between the parent and the panel, or to clip a corner on
	   the way to an item, without being long enough that the menu feels stuck
	   open behind you. layout.css spends it as a transition-DELAY, not a
	   duration, so it survives prefers-reduced-motion — the wait is an
	   affordance, not an animation. */
	--nav-panel-grace: 320ms;

	/* The dropdown's own fade. Split out from --transition because the panel's
	   visibility flip has to wait for the fade to FINISH — layout.css computes
	   calc(var(--nav-panel-grace) + var(--nav-panel-fade)) — and --transition
	   bundles duration with easing, which calc() cannot take apart. Keep this
	   equal to --transition's duration or the panel will fade at a different
	   pace than every other control. */
	--nav-panel-fade: 200ms;

	--focus-ring-color: var(--color-primary);

	/* Entrance reveals (base.css). 14px of travel, deliberately short: a single
	   page runs this on 60+ elements, and a longer throw reads as the layout
	   settling rather than as content arriving. `translate` is deliberate — the card hover lift owns
	   `transform`, and the two properties compose instead of overwriting. */
	--reveal-shift: 14px;
	--reveal-duration: 480ms;
	--reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Torn section seams (layout.css). --seam-tile is the intrinsic width of
	   assets/img/textures/seam-torn.svg; changing one without the other breaks
	   the repeat-x join. */
	--seam-height: 2.5rem;
	--seam-tile: 640px;

	/* Dark-to-dark boundaries take no torn seam — there is no light surface to
	   tear. They chain instead: both sides settle onto flat --color-dark across
	   this distance, which makes the join colour-identical however each
	   diagonal gradient's geometry happens to fall at a given viewport. Applied
	   as an extra background layer so the underlying gradient is untouched.
	   Only the hero -> trust-strip join is dark-to-dark now; the three chains
	   into the footer went away when the footer grew a light brand band, and the
	   downward counterpart with them. */
	--chain-dark-up: linear-gradient(0deg, var(--color-dark), transparent 4.5rem);
}

@media (min-width: 40rem) {
	:root { --container-pad: 1.5rem; }
}

@media (min-width: 64rem) {
	:root {
		--container-pad: 2rem;
		--section-pad: 6rem;             /* py-24 at desktop */
		--subnav-h: 6.5625rem;           /* 105px: two rows, 1024px to ~1272px */
	}
}

@media (min-width: 80rem) {
	:root { --subnav-h: 3.75rem; }       /* 60px: one row again */
}