/* Instrument Sans ('Contravo Web') is declared with @font-face at the top of each page's inline <style>, from assets/fonts/. */

/* Contravo design tokens
   Source of truth: Figma "Contravo — Design Tokens (shadcn)", Website page.
   Layers: 1 primitives (palettes, type, space, radius) → 2 semantic (shadcn names, as in Figma)
   → 3 legacy aliases (old names used by the pages; migrate section by section, then delete). */

:root{
  /* ---------- 1. Primitives: colour ---------- */
  /* Zinc — Tailwind v3 */
  --zinc-50:#FAFAFA;  --zinc-100:#F4F4F5; --zinc-200:#E4E4E7; --zinc-300:#D4D4D8;
  --zinc-400:#A1A1AA; --zinc-500:#71717A; --zinc-600:#52525B; --zinc-700:#3F3F46;
  --zinc-800:#27272A; --zinc-900:#18181B; --zinc-950:#09090B;

  /* Violet — Contravo (700 = brand violet, 950 = ink) */
  --violet-50:#F5F4FA;  --violet-100:#E8E3FF; --violet-200:#C8BFFB; --violet-300:#A89AF6;
  --violet-400:#8975EF; --violet-500:#6F5DE2; --violet-600:#5744D5; --violet-700:#4025C8;
  --violet-800:#261896; --violet-900:#110A66; --violet-950:#030139;

  /* Mint — Contravo (100 = brand mint, 800 = success) */
  --mint-50:#F2FBF8;  --mint-100:#CBF1E5; --mint-200:#A6E5D1; --mint-300:#7FD8BD;
  --mint-400:#5ABFA0; --mint-500:#2EA783; --mint-600:#269071; --mint-700:#1E795F;
  --mint-800:#17634E; --mint-900:#0D4637; --mint-950:#062A21;

  /* Only zinc, violet and mint are allowed. White is the one base colour outside the scales. */
  --white-base:#FFFFFF;

  /* ---------- 1. Primitives: type ---------- */
  /* Instrument Sans (served as 'Contravo Web'), Regular 400 and Medium 500.
     Scale: 12 · 14 · 16 · 19 · 23 · 29 · 36 · 48 · 60 · 76 — ratio 1.25 from body up, 1.33 at H3→H2.
     Figma styles define H2–H4 and the body steps; Display, H1 and H5 continue the same ratio.
     Headings above H4 are fluid: they reach their Figma size at 1440px wide. */
  --font-sans:'Contravo Web',ui-sans-serif,system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500;

  --fs-display:clamp(3.25rem,2.722rem + 2.254vw,4.75rem); /* 52 → 76 */
  --fs-h1:clamp(2.75rem,2.398rem + 1.502vw,3.75rem);      /* 44 → 60 */
  --fs-h2:clamp(2.25rem,1.986rem + 1.127vw,3rem);         /* 36 → 48  Figma Heading/H2 */
  --fs-h3:clamp(1.875rem,1.743rem + .563vw,2.25rem);      /* 30 → 36  Figma Heading/H3 */
  --fs-h4:1.8125rem;                                       /* 29       Figma Heading/H4 */
  --fs-h5:1.4375rem;                                       /* 23 */
  --fs-lead:1.1875rem;                                     /* 19       Figma Body/Lead */
  --fs-body:1rem;                                          /* 16       Figma Body/body */
  --fs-label:.875rem;                                      /* 14       Figma Body/Label */
  --fs-micro:.75rem;                                       /* 12       Figma Body/Micro */

  --lh-display:1.05; --lh-h1:1.07; --lh-h2:1.12; --lh-h3:1.18; --lh-h4:1.224; --lh-h5:1.3;
  --lh-lead:1.5; --lh-body:1.725; --lh-label:1.45; --lh-micro:1.45;

  /* Figma letter spacing is in %, so 1% = .01em */
  --tr-display:-.035em; --tr-h1:-.032em; --tr-h2:-.026em; --tr-h3:-.02em; --tr-h4:-.015em; --tr-h5:-.01em;
  --tr-lead:.005em; --tr-body:0; --tr-label:.01em; --tr-micro:0; --tr-caps:.06em; --tr-eyebrow:.04em;

  --measure:65ch; --measure-lead:52ch; --measure-heading:20ch;

  /* Product-illustration text (UI inside drawings, not page copy) */
  --fs-ui-3xl:2.6rem; --fs-ui-2xl:2rem; --fs-ui-xl:1.5rem; --fs-ui-lg:1.375rem; --fs-ui-md:1.25rem;
  --fs-ui-base:1.125rem; --fs-ui-sm:.8125rem; --fs-ui-xs:.6875rem; --fs-ui-2xs:.6875rem; /* was 9px: illustration text never goes below 11px */
  --lh-ui:1.5;

  /* ---------- 1. Primitives: space and radius ---------- */
  /* Figma --spacing-n uses the same values */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
  --sp-8:40px; --sp-9:48px; --sp-10:56px; --sp-11:64px; --sp-12:72px; --sp-13:80px; --sp-14:96px; --sp-15:120px; --sp-16:160px;

  /* Elevation — shadows tinted with violet-950 so they sit in the palette.
     Each stack: 1px ring (edge) · tight contact · soft ambient · long diffuse. */
  /* A whole document lying on the page background: hero sheets and the register. The only stack with a
     long violet diffuse, because it is the only thing that casts across a whole section. Never use it on
     something inside a card — that is --elevation-paper. */
  --elevation-sheet:
    0 0 0 1px rgb(3 1 57 / .06),
    0 1px 2px rgb(3 1 57 / .04),
    0 6px 12px -6px rgb(3 1 57 / .06),
    0 24px 40px -20px rgb(3 1 57 / .10),
    0 56px 96px -48px rgb(64 37 200 / .14);
  /* Paper floating inside an illustration panel (the ask card, the tally, the verdict bar). Reads as lifted
     off its panel without casting over the section behind it. */
  --elevation-paper:
    0 0 0 1px rgb(3 1 57 / .06),
    0 1px 2px rgb(3 1 57 / .04),
    0 4px 12px -6px rgb(3 1 57 / .08),
    0 16px 28px -16px rgb(3 1 57 / .08);
  --elevation-paper-back:
    0 0 0 1px rgb(3 1 57 / .05),
    0 1px 2px rgb(3 1 57 / .03),
    0 8px 20px -12px rgb(3 1 57 / .08);
  /* Small raised chips and pills on tinted backgrounds (Figma "Now in Early Access" pill) */
  --elevation-pill:
    0 0 .5px rgb(64 37 200 / .4),
    0 1px 2px rgb(3 1 57 / .05),
    0 2px 4px rgb(3 1 57 / .03);
  /* Hairline lift for flat tiles and list rows (Figma drop-shadow 0 0 .5px 25%) */
  --elevation-hairline:0 0 .5px rgb(3 1 57 / .25);
  /* Every image gets the same 1px inset edge. Pure black at 10%, never a palette neutral and never the
     accent — a tinted line inherits the surface behind the image and looks like grime, not a boundary. */
  --outline-image:1px solid rgb(0 0 0 / .1);
  /* Primary button: a violet-900 ring for the edge, a 1px lift, and a faint top highlight inside */
  /* Secondary button: a hairline ring, a 1px contact shadow and a faint top highlight, on white */
  --elevation-button-secondary:0 0 0 .5px rgb(3 1 57 / .16),0 1px 2px rgb(3 1 57 / .06),inset 0 1px 0 rgb(255 255 255 / .8);
  --elevation-button:0 0 0 .5px var(--violet-900),0 1px 2px rgb(3 1 57 / .2),inset 0 1px 0 rgb(255 255 255 / .16);
  /* Image tiles and illustration panels sitting on a grey card */
  --elevation-tile:0 0 1px rgb(3 1 57 / .25),0 1px 2px rgb(3 1 57 / .1);
  /* Paper resting inside a card (tiles, excerpts). Ring + contact + one short soft layer; no long ambient. */
  --elevation-card:
    0 0 0 1px rgb(3 1 57 / .06),
    0 1px 2px rgb(3 1 57 / .05),
    0 4px 10px -4px rgb(3 1 57 / .06);
  /* Top nav: attached to the top edge, so the depth falls downward only. Ring (sides and bottom), contact, soft drop. */
  --elevation-nav:
    0 0 0 1px rgb(3 1 57 / .06),
    0 1px 2px rgb(3 1 57 / .04),
    0 8px 16px -8px rgb(3 1 57 / .08),
    0 20px 32px -24px rgb(64 37 200 / .12);
  /* Selected segment in a segmented control */
  --elevation-segment:0 0 .5px rgb(3 1 57 / .1),0 1px 1px rgb(3 1 57 / .05);
  /* Recessed surface: the footer sits under the page. Hairline lip + short falloff + long soft falloff. */
  --elevation-inset-top:
    inset 0 1px 0 rgb(3 1 57 / .06),
    inset 0 6px 8px -6px rgb(3 1 57 / .08),
    inset 0 24px 32px -24px rgb(3 1 57 / .08);
  /* Paper running into a holder floor (hero contract): eased fade, drawn only across the paper's width */
  /* Where a contract runs off the bottom of its holder. The hero section clips at the stage floor, so
     without this the paper stack — and the shadow down each side of it — ends in a hard horizontal slice.
     An eased fade to the floor colour dissolves it instead (the hero gradient resolves to --background
     there, so white is exact). Eased, not linear, or it bands across 96px. Paper width only, never
     full-bleed. Same treatment as the About register's own floor. */
  --fade-paper-out:linear-gradient(to top,
    var(--white-base) 0%,
    color-mix(in srgb,var(--white-base) 97%,transparent) 18%,
    color-mix(in srgb,var(--white-base) 88%,transparent) 34%,
    color-mix(in srgb,var(--white-base) 72%,transparent) 48%,
    color-mix(in srgb,var(--white-base) 50%,transparent) 62%,
    color-mix(in srgb,var(--white-base) 28%,transparent) 76%,
    color-mix(in srgb,var(--white-base) 11%,transparent) 88%,
    transparent 100%);
  /* Floating UI: hover cards, menus, popovers */
  --elevation-popover:
    0 0 0 1px rgb(3 1 57 / .04),
    0 1px 2px rgb(3 1 57 / .05),
    0 12px 32px -8px rgb(3 1 57 / .18);
  /* Glow for moving highlights (scanner line) */
  --glow-violet:0 0 14px 1px color-mix(in srgb,var(--violet-400) 55%,transparent);

  /* ---------- 1. Primitives: motion ----------
     Easing: enter/reveal = out · moving on screen = in-out · hover/colour = hover · never ease-in alone.
     Duration: hover 150 · exit 150 · UI open 200 · state 300 · reveal 600 · sequence 1150. */
  --ease-out:cubic-bezier(.22,1,.36,1);          /* default: tooltips, reveals, count ticks */
  --ease-out-strong:cubic-bezier(.32,.72,0,1);   /* larger surfaces arriving: pills, panels, drawers */
  --ease-in-out:cubic-bezier(.65,0,.35,1);       /* things already on screen moving: paper squaring up */
  --ease-hover:ease;                             /* colour, shadow, background on hover */
  --dur-hover:150ms;
  --dur-exit:150ms;
  --dur-open:200ms;
  --dur-state:300ms;
  --dur-reveal:900ms;      /* hero highlights wiping in, scan beam fading in and out */
  --dur-sequence:1700ms;    /* hero pages landing and squaring up */
  --dur-note:700ms;        /* hero margin notes and review pill arriving (with a 3px blur settling to sharp) */
  --dur-cut:420ms;         /* 404: one cut running down the sheet */
  --dur-fall:1100ms;       /* 404: a shredded strip dropping out of the frame */
  --ease-fall:cubic-bezier(.5,0,.75,0);          /* exits only: a strip falling away under gravity (slow start, then gone) */
  --dur-sign:1400ms;       /* one handwritten signature being drawn (About, founders) */
  --dur-live:2.4s;         /* nav "Now in early access" light: one pulse of the dot and its ring; loops */
  --dur-ambient:12s;       /* slow looping decoration (footer wordmark shimmer); linear, pauses off-screen */
  --hover-grace:120ms;                           /* delay before a hover card closes (set in JS) */


  /* Layout widths (desktop) */
  --w-content:1040px;  /* standard section content width */
  --w-hero:600px;      /* hero text column */
  --nav-h:56px;        /* fixed top nav height; heroes and sticky elements offset by it */
  --gutter:var(--sp-6); /* page side margin below the content width; --sp-5 on phones */

  /* shadcn radius scale; Figma --radius-lg = 8 */
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-full:999px;

  /* ---------- 2. Semantic (shadcn names, matching the Figma variables) ---------- */
  --background:var(--white-base);
  --foreground:var(--violet-950);
  --card:var(--white-base);    --card-foreground:var(--violet-950);
  --popover:var(--white-base); --popover-foreground:var(--violet-950);
  --primary:var(--violet-700);--primary-foreground:var(--white-base);
  --secondary:var(--violet-50);--secondary-foreground:var(--violet-950);
  --muted:var(--zinc-100);    --muted-foreground:var(--zinc-600);  /* 7.4:1 on white; zinc-500 for small print */
  --accent:var(--violet-100); --accent-foreground:var(--violet-800);
  --border:var(--zinc-200);   --input:var(--zinc-200);
  --ring:var(--zinc-800);   /* focus outline: neutral so it never reads as a highlight in an illustration */
  --success:var(--mint-800);  --success-surface:var(--mint-100);
  --review:var(--violet-800); --review-surface:var(--violet-100);  /* "needs review" states */
  --surface-dark:var(--violet-950);

  /* ---------- 3. Legacy aliases (do not use in new CSS) ---------- */
  --ink:var(--violet-950);
  --ink-deep:var(--violet-900);
  --violet:var(--violet-700);
  --iris:var(--violet-400);
  --lilac:var(--violet-100);
  --frost:var(--violet-50);
  --white:var(--white-base);
  --slate:var(--muted-foreground);
  --mint:var(--mint-100);
  --line:var(--border);
  --line-dark:var(--violet-900);
  --warning:var(--review);
  --fs-sm:var(--fs-body); --fs-caption:var(--fs-label);
  --lh-heading:var(--lh-h2); --lh-snug:var(--lh-h4);
  --tr-heading:var(--tr-h2); --tr-tight:var(--tr-h4);
  --r-xs:var(--radius-sm); --r-sm:var(--radius-md); --r-md:var(--radius-lg); --r-lg:var(--radius-xl); --r-pill:var(--radius-full);
}

/* Content width follows the viewport once it drops below 1040px + two gutters. */
@media(max-width:1120px){:root{--w-content:calc(100vw - 2 * var(--gutter) - 16px)}}
@media(max-width:760px){:root{--gutter:var(--sp-5);--w-content:calc(100vw - 2 * var(--gutter))}}