/* Blackline design tokens. Single source of truth. Reasoning: docs/art-direction.md */

:root {
  /* neutral ramp */
  --_ink-990: #060708;
  --_ink-950: #0A0B0C;
  --_ink-900: #101113;
  --_ink-850: #16181A;
  --_ink-800: #1D1F22;
  --_ink-700: #26292D;
  --_ink-600: #33373C;
  --_ink-500: #4A4F55;
  /* _ink-400 was #6E747A: 3.49:1 on --surface-raised-hover, 3.77 on
     --surface-raised, 4.00 on --surface-alt, 4.17 on --surface-page — below
     AA on every ground it prints on. Re-cut 2026-09-06 to #82888E: 4.61 /
     4.97 / 5.27 / 5.50 / 5.63 (raised-hover / raised / alt / page / sunken),
     and 1.36:1 against --text-muted so the third ink step survives. */
  --_ink-400: #82888E;
  --_ink-300: #9AA0A6;
  --_ink-200: #C3C7CB;
  --_ink-100: #E8EAEC;

  /* bone ramp */
  --_bone-050: #FAF9F6;
  --_bone-100: #F2F0EC;
  --_bone-200: #E4E1D9;
  --_bone-300: #CFCBC1;
  --_bone-ink: #0E0F10;
  --_bone-ink-soft: #55585B;

  /* accent ramp — in-limit signal green */
  --_signal-400: #C2E85C;
  --_signal-500: #AEDD2F;
  --_signal-600: #86AB1D;
  --_signal-700: #4F6606;

  /* alpha */
  --_alpha-ink-45: rgba(10, 11, 12, 0.45);
  --_alpha-ink-30: rgba(10, 11, 12, 0.30);
  --_alpha-ink-22: rgba(10, 11, 12, 0.22);
  --_alpha-ink-12: rgba(10, 11, 12, 0.12);
  --_alpha-ink-08: rgba(10, 11, 12, 0.08);
  --_alpha-sunken-72: rgba(6, 7, 8, 0.72);
  --_alpha-sunken-86: rgba(6, 7, 8, 0.86);
  --_alpha-light-04: rgba(255, 255, 255, 0.04);
  --_alpha-light-06: rgba(255, 255, 255, 0.06);
  --_alpha-light-10: rgba(255, 255, 255, 0.10);
  --_alpha-light-14: rgba(255, 255, 255, 0.14);
  --_alpha-light-20: rgba(255, 255, 255, 0.20);
  --_alpha-light-28: rgba(255, 255, 255, 0.28);
  --_shadow-ink-40: rgba(0, 0, 0, 0.40);
  --_shadow-ink-55: rgba(0, 0, 0, 0.55);
  --_shadow-ink-70: rgba(0, 0, 0, 0.70);
  --_shadow-ink-80: rgba(0, 0, 0, 0.80);

  /* surfaces */
  --surface-page: var(--_ink-950);
  --surface-alt: var(--_ink-900);
  --surface-sunken: var(--_ink-990);
  --surface-raised: var(--_ink-850);
  --surface-raised-hover: var(--_ink-800);
  --surface-inset: var(--_ink-900);
  --surface-inset-hover: var(--_ink-850);
  --surface-accent: var(--_signal-500);
  --surface-accent-hover: var(--_signal-400);
  --surface-accent-wash: rgba(174, 221, 47, 0.10);
  --surface-accent-wash-strong: rgba(174, 221, 47, 0.18);
  --surface-invert: var(--_bone-100);
  --surface-invert-raised: var(--_bone-050);
  --surface-invert-ink: var(--_ink-850);
  --surface-media: var(--_ink-800);
  --surface-header: rgba(10, 11, 12, 0.88);

  /* text */
  --text-primary: var(--_ink-100);
  --text-secondary: var(--_ink-200);
  --text-muted: var(--_ink-300);
  --text-faint: var(--_ink-400);
  --text-ghost: rgba(255, 255, 255, 0.045);
  --text-accent: var(--_signal-500);
  --text-accent-strong: var(--_signal-400);
  --text-accent-quiet: var(--_signal-600);
  --text-on-accent: var(--_ink-950);
  --text-on-accent-muted: rgba(10, 11, 12, 0.66);
  --text-on-invert: var(--_bone-ink);
  --text-on-invert-muted: var(--_bone-ink-soft);
  --text-on-invert-accent: var(--_signal-700);
  --text-on-media: var(--_ink-100);

  /* borders */
  --border-hairline: var(--_alpha-light-06);
  --border-soft: var(--_alpha-light-10);
  --border-strong: var(--_ink-700);
  --border-accent: var(--_signal-500);
  --border-accent-soft: rgba(174, 221, 47, 0.35);
  --border-on-invert: var(--_alpha-ink-12);
  --border-on-invert-strong: var(--_bone-300);
  --border-on-accent: var(--_alpha-ink-22);
  --border-width-hair: 1px;
  --border-width-medium: 2px;
  --border-width-bar: 3px;
  --border-width-slab: 4px;

  /* focus */
  --focus-ring-color: var(--_signal-500);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --focus-ring-color-invert: var(--_signal-700);
  --focus-ring-inset: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  /* overlays / scrims / sheen / grain */
  --overlay-media: rgba(10, 11, 12, 0.28);
  --overlay-media-hover: rgba(10, 11, 12, 0.12);
  --overlay-media-heavy: rgba(6, 7, 8, 0.55);
  --scrim-hero: linear-gradient(180deg, rgba(6, 7, 8, 0.72) 0%, rgba(6, 7, 8, 0.35) 38%, rgba(6, 7, 8, 0.78) 100%);
  --scrim-tile: linear-gradient(180deg, rgba(6, 7, 8, 0) 42%, rgba(6, 7, 8, 0.86) 100%);
  /* rail-end scrim runs the full --rail-peek box. At 60% the fade was 14px at
     390 and a bisected marque read at 3.7:1 (legible type, not a ghost). */
  --scrim-edge: linear-gradient(90deg, rgba(6, 7, 8, 0.9) 0%, rgba(6, 7, 8, 0) 100%);
  --scrim-bleed: linear-gradient(180deg, rgba(6, 7, 8, 0) 52%, rgba(6, 7, 8, 0.82) 100%);
  --sheen-color: var(--_alpha-light-14);
  --sheen-color-specular: var(--_alpha-light-28);
  --sheen-skew: -18deg;
  --sheen-width-compact: 45%;
  --sheen-width-broad: 20%;
  --sheen-width-specular: 12%;
  --grain-opacity: 0.055;
  --grain-opacity-invert: 0.09;
  --grain-size: 180px;
  --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  /* families */
  --font-display: "Chivo", "Chivo Fallback", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: var(--font-display);
  --font-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* type scale — nothing exceeds --text-display at any viewport */
  --text-display: clamp(2.75rem, 1.55rem + 5vw, 6.25rem);
  --text-h2: clamp(1.875rem, 1.15rem + 3.1vw, 3.5rem);
  --text-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.625rem);
  --text-h4: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);
  --text-stat: clamp(2.25rem, 1.5rem + 3.1vw, 4rem);
  --text-index: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --text-ledger: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  --text-price: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);
  --text-step: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
  --text-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);
  --text-spec: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
  --text-body: 1rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-label: 0.75rem;
  --text-micro: 0.6875rem;

  /* weight */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 800;

  /* line-height */
  --leading-flat: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.16;
  --leading-heading: 1.28;
  --leading-micro: 1.45;
  --leading-body: 1.6;
  --leading-relaxed: 1.75;

  /* tracking */
  --tracking-display: -0.025em;
  --tracking-tight: -0.012em;
  --tracking-normal: 0em;
  --tracking-mono-tight: -0.03em;
  --tracking-mono-label: 0.06em;
  --tracking-label: 0.16em;

  /* space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --space-5xl: 10rem;
  --space-section: clamp(4rem, 2.4rem + 6.6vw, 8.5rem);
  --space-section-tight: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);
  --space-band: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --space-stack: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  /* grid & widths */
  --grid-columns: 12;
  --grid-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --grid-gap-tight: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  --grid-row-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  --width-content: 1320px;
  --width-wide: 1560px;
  --width-page: 1920px;
  --width-prose: 34rem;
  --width-measure: 62ch;
  --card-min: 300px;
  --card-min-wide: 380px;

  /* radius — five jobs, see art-direction */
  --radius-sharp: 0px;
  --radius-inset: 6px;
  --radius-media: 10px;
  --radius-card: 14px;
  --radius-slab: 22px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* chamfer — top-right on every block. Override --chamfer; clip and edge follow. */
  --chamfer-sm: 12px;
  --chamfer-md: 20px;
  --chamfer-lg: 32px;
  --chamfer: var(--chamfer-md);
  --chamfer-clip: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  --chamfer-edge-ink: var(--border-soft);
  --chamfer-edge-ink-accent: var(--border-accent);
  --chamfer-edge-ink-invert: var(--border-on-invert-strong);
  --chamfer-edge: linear-gradient(45deg,transparent calc(50% - 1.25px),var(--chamfer-edge-ink) calc(50% - 1.25px),var(--chamfer-edge-ink) calc(50% - .25px),transparent calc(50% - .25px)) top right/var(--chamfer) var(--chamfer) no-repeat;

  /* shadow — box-shadow for square boxes, drop-shadow for chamfered ones */
  --shadow-card: 0 1px 2px var(--_shadow-ink-40), 0 8px 24px -8px var(--_shadow-ink-55);
  --shadow-card-hover: 0 2px 4px var(--_shadow-ink-40), 0 22px 46px -14px var(--_shadow-ink-70);
  --shadow-media: 0 24px 60px -24px var(--_shadow-ink-80), 0 2px 6px var(--_shadow-ink-40);
  --shadow-header: 0 1px 0 var(--_alpha-light-06), 0 14px 32px -20px var(--_shadow-ink-80);
  --shadow-accent: 0 8px 26px -14px rgba(174, 221, 47, 0.32);
  --shadow-field: inset 0 1px 0 var(--_alpha-light-04);
  --shadow-invert-card: 0 1px 2px var(--_alpha-ink-08), 0 14px 30px -16px var(--_alpha-ink-22);
  --shadow-chamfer: drop-shadow(0 1px 1px var(--_shadow-ink-40)) drop-shadow(0 14px 22px var(--_shadow-ink-55));
  --shadow-chamfer-invert: drop-shadow(0 1px 1px var(--_alpha-ink-08)) drop-shadow(0 16px 24px var(--_alpha-ink-22));
  --shadow-none: none;

  /* tick language — the inputs. The composed rules (--tick-rule, -fine,
     -vertical) are NOT here; they sit in the per-element block at the end of
     this file so a section root can override any input below and every rule
     inside it follows. Never `filter: invert()` a tick rule. */
  --tick-pitch: 8px;
  --tick-len: 4px;
  --tick-len-major: 9px;
  --tick-pitch-fine: 6px;
  --tick-len-fine: 3px;
  --tick-ink: var(--_alpha-light-10);
  --tick-ink-major: var(--_alpha-light-20);
  --tick-ink-invert: var(--_alpha-ink-12);
  --tick-ink-invert-major: var(--_alpha-ink-30);
  --tick-ink-accent: var(--_alpha-ink-30);
  --tick-ink-accent-major: var(--_alpha-ink-45);
  --tick-band-pitch: clamp(10px, 0.85vw, 16px);
  --tick-band-len: 7px;
  --tick-band-len-major: 16px;
  --marker-dot: 10px;
  --marker-dot-lg: 18px;

  /* specimen treatment — no photograph ships plain */
  --specimen-inset: 8px;
  --specimen-inset-lg: 12px;
  --specimen-frame: var(--_alpha-light-20);
  --specimen-frame-invert: var(--_alpha-ink-22);
  --specimen-frame-width: var(--border-width-hair);
  --chip-bg: var(--_alpha-sunken-86);
  --chip-border: var(--_alpha-light-14);
  --chip-text: var(--text-secondary);
  --chip-value: var(--text-accent);
  --chip-pad-block: 6px;
  --chip-pad-inline: 10px;
  --chip-min-h: 26px;
  --chip-offset: var(--specimen-inset);

  /* annotation — heading spec line, bracketed section coordinate */
  --spec-line-gap: var(--space-xs);
  --bracket-arm: 7px;
  --bracket-gap: 10px;
  --bracket-color: var(--border-accent-soft);
  --bracket-width: var(--border-width-hair);

  /* ledger — spec-table-as-layout: display-size name, micro data, hairline rows */
  --ledger-row-min-h: clamp(7.5rem, 9vw, 10.5rem);
  --ledger-pad-block: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  --ledger-col-gap: clamp(1rem, 0.6rem + 1.6vw, 2.5rem);
  --ledger-grid: minmax(13rem, 26fr) minmax(15rem, 42fr) minmax(6.5rem, 13fr);
  --ledger-micro-cols: 2;
  --ledger-rule: var(--border-hairline);
  --ledger-rule-active: var(--border-accent-soft);
  --ledger-hover: var(--surface-alt);

  /* full-bleed photo band — 100vw, no container, tiles butted, micro label bottom-left */
  --bleed-band-h: clamp(20rem, 42vw, 38.75rem);
  --bleed-label-inset: clamp(0.75rem, 1.4vw, 1.5rem);
  --bleed-seam: var(--border-width-hair);
  --bleed-seam-ink: var(--_ink-990);

  /* bordered cell rail — trust marques */
  --cell-min-w: clamp(9.375rem, 14vw, 14.375rem);
  --cell-h: clamp(4.5rem, 6vw, 6.5rem);

  /* easing — four curves, four jobs */
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-state: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-lift: cubic-bezier(0.34, 1.2, 0.64, 1);

  /* duration */
  --dur-instant: 120ms;
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-accordion: 340ms;
  --dur-slow: 480ms;
  --dur-hero: 600ms;
  --dur-sheen-compact: 380ms;
  --dur-sheen-broad: 600ms;
  --dur-marquee: 38s;
  --stagger-tight: 40ms;
  --stagger-base: 60ms;
  --stagger-loose: 80ms;

  /* transform amounts */
  --lift-card: -6px;
  --lift-button: -2px;
  --lift-tile: -4px;
  --lift-ledger: -2px;
  --scale-media-hover: 1.045;
  --scale-bleed-hover: 1.03;
  --reveal-shift: 24px;

  /* controls & components */
  --control-h-sm: 40px;
  --control-h: 48px;
  --control-h-lg: 56px;
  --control-pad-x: 1.5rem;
  --control-pad-x-lg: 2rem;
  --card-pad: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  --card-pad-lg: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  --accordion-row-pad: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-circle: 56px;
  --icon-circle-lg: 72px;
  --step-circle: clamp(56px, 4vw, 76px);
  --avatar: 44px;
  --brandmark-h: clamp(28px, 2.2vw, 40px);
  --header-h: clamp(60px, 4.4vw, 76px);
  /* floor 3.5rem: a 20px peek at 390 could not ghost an ~83px marque. 6vw governs
     from 934px up, so the jobs rail (consumer >= 1024) is unchanged. */
  --rail-peek: clamp(3.5rem, 6vw, 5rem);

  /* reserved media ratios — CLS 0 */
  --ratio-hero: 16 / 9;
  --ratio-card: 4 / 3;
  --ratio-tall: 3 / 4;
  --ratio-portrait: 2 / 3;
  --ratio-wide: 21 / 9;
  --ratio-bleed: 3 / 2;
  --ratio-square: 1 / 1;

  /* z-index */
  --z-below: -1;
  --z-media: 1;
  --z-scrim: 2;
  --z-content: 3;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 40;
  --z-overlay: 60;
  --z-drawer: 80;
  --z-grain: 90;
  --z-skiplink: 200;

  /* breakpoints */
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1600px;
  --bp-3xl: 1920px;
}

/* --------------------------------------------------------------------------
   COMPOSED TICK RULES — declared on every element, not on :root, on purpose.
   A custom property substitutes its var() references on the element where it
   is DECLARED. A :root-level --tick-rule therefore inherits already resolved
   to the root inks and the 8px pitch, and every local override of --tick-ink
   is inert (statband.css measured this). Declared here, each element rebuilds
   the rule from the --tick-* inputs it inherits, so setting --tick-ink on a
   section root recolours every rule inside it. Pseudo-elements are listed so
   an override placed on the pseudo itself also takes.
   Cost: three gradient strings per element, never rasterised until used.
   -------------------------------------------------------------------------- */
*, ::before, ::after {
  --tick-pitch-major: calc(var(--tick-pitch) * 5);
  --tick-rule-h: var(--tick-len-major);
  --tick-rule-w: var(--tick-len-major);
  /* horizontal: marks hang from the top edge, hairline along the top */
  --tick-rule:
    repeating-linear-gradient(90deg,var(--tick-ink-major) 0 var(--border-width-hair),transparent var(--border-width-hair) var(--tick-pitch-major)) 0 0/100% var(--tick-len-major) no-repeat,
    repeating-linear-gradient(90deg,var(--tick-ink) 0 var(--border-width-hair),transparent var(--border-width-hair) var(--tick-pitch)) 0 0/100% var(--tick-len) no-repeat,
    linear-gradient(var(--tick-ink),var(--tick-ink)) 0 0/100% var(--border-width-hair) no-repeat;
  --tick-rule-fine:
    repeating-linear-gradient(90deg,var(--tick-ink) 0 var(--border-width-hair),transparent var(--border-width-hair) var(--tick-pitch-fine)) 0 0/100% var(--tick-len-fine) no-repeat,
    linear-gradient(var(--tick-ink),var(--tick-ink)) 0 0/100% var(--border-width-hair) no-repeat;
  /* vertical: --tick-rule stood on end. Marks grow from the left edge,
     hairline along the left; size the box with --tick-rule-w or offset with
     background-position-x to centre the axis in a gutter. */
  --tick-rule-vertical:
    repeating-linear-gradient(180deg,var(--tick-ink-major) 0 var(--border-width-hair),transparent var(--border-width-hair) var(--tick-pitch-major)) 0 0/var(--tick-len-major) 100% no-repeat,
    repeating-linear-gradient(180deg,var(--tick-ink) 0 var(--border-width-hair),transparent var(--border-width-hair) var(--tick-pitch)) 0 0/var(--tick-len) 100% no-repeat,
    linear-gradient(var(--tick-ink),var(--tick-ink)) 0 0/var(--border-width-hair) 100% no-repeat;
}