/* Intercept web design system: tokens
   Translated from the locked Fritz Glass deck system (fritz-mark-3d/SYSTEM.md, DECISIONS.md, master/spec*.py).
   Deck canvas is 1280 x 720 px. Where a value comes straight from the deck, the comment names the source.
   Light is the default scheme. Dark is applied per section with data-scheme="dark" and is used sparingly
   (hero or cover, section dividers, statements, the closing CTA, the footer).
   Engine: Claude. */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ===== Color: brand core (SYSTEM.md) ===== */
  --c-flarepop: #FF00E5;          /* accent on dark only. Never normal-size text on light: 3.05:1 on Halo, 3.29:1 on white */
  --c-flarepop-deep: #C800B4;     /* accent text on light: spec.py LT acc, 4.73:1 on Halo, 5.10:1 on white, 4.25:1 on light tint (large text only there) */
  --c-ink: #0A0A0F;               /* dark ground, and all text on light */
  --c-halo: #F5F6FA;              /* light ground */
  --c-white: #FFFFFF;             /* all text on dark */

  /* Tints: the deck never puts a solid pink block on dark; large areas use these (spec_pitch.py TINT) */
  --c-tint-dark: #15151C;         /* panels and cards on Ink */
  --c-tint-light: #E9EAF1;        /* panels and cards on Halo */
  --c-line-dark: #3A3A46;         /* hollow box outline on Ink (spec_round3.py LINE) */
  --c-line-light: #CDCFD9;        /* hollow box outline on Halo */
  --c-rule-light: #D5D6DE;        /* timeline track on Halo */
  --c-surface-white: #FFFFFF;     /* raised card on Halo (web addition, see MAPPING.md) */

  /* Approved Flarepop-to-violet gradient (SYSTEM.md): big numbers, highlights, arrows, chart lead series,
     and connector lines. Nothing else: never bullets, table marks, checkboxes, body text, or fills behind text. */
  --c-grad-start: #FF00CC;
  --c-grad-end: #7A55FF;
  --grad-flare: linear-gradient(90deg, var(--c-grad-start) 0%, var(--c-grad-end) 100%);
  --grad-flare-diag: linear-gradient(135deg, var(--c-grad-start) 0%, var(--c-grad-end) 100%);

  /* Coolsweep is for chart data only (prior period). Never a divider, rule, or UI color. */
  --c-data-current: var(--c-flarepop);
  --c-data-prior: #1A7AFF;

  /* System states. Used only in form validation.
     Error text must pass WCAG AA (4.5:1). The Fritz kit red #F50041 fails on light (3.92:1 on Halo, 4.23:1 on white),
     so the light value is darkened to #C8003A (5.53:1 on Halo, 5.97:1 on white). Dark sections override it below.
     An error is never carried by color alone: the field also gets a 2px border, an icon, and a written message. */
  --c-error: #C8003A;
  --c-success: #00D862;           /* non-text only, and on dark only: 1.77:1 on Halo */

  /* ===== Glass treatments =====
     The 3D glass is always a rendered image (assets/glass, icons). CSS never fakes the 3D mark.
     These tokens cover the two places the deck uses translucency in 2D: the translucent maturity bars
     and the glowing piece of every glass object. Glass never sits over a photo. */
  --glass-fill-light: rgba(255, 255, 255, 0.55);
  --glass-fill-dark: rgba(255, 255, 255, 0.06);
  --glass-edge-light: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 1);
  --glass-edge-dark: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --glass-glow: 0 0 48px rgba(255, 0, 229, 0.35);          /* the one glowing piece */
  --glass-glow-soft: 0 0 96px rgba(255, 0, 229, 0.18);
  /* Dark glass renders feather into Ink at every edge (DECISIONS round 5). Use this mask on any dark render
     that does not already fade, so the image edge is never visible. */
  --glass-feather: radial-gradient(ellipse 70% 70% at 60% 50%, #000 55%, transparent 100%);

  /* ===== Shadows =====
     Boxes in the deck are flat: tint fills or hairline outlines, no drop shadows (Fritz kit forbids them).
     The only shadow is the soft overhead contact shadow baked into the light glass renders. */
  --shadow-none: none;
  --shadow-contact: 0 24px 32px -24px rgba(10, 10, 15, 0.18);  /* only under a glass image placed on Halo */
  --focus-ring: 0 0 0 3px var(--c-halo), 0 0 0 5px var(--c-flarepop-deep);

  /* ===== Type families (SYSTEM.md: Instrument Sans and Inter, nothing else) ===== */
  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ===== Type scale =====
     Deck px on a 1280 canvas mapped to fluid web sizes. Upper bound is the deck size where the deck size
     reads well at 1440; the lower bound is the phone size. Floor for any text is 18px, the deck floor (Andrew, locked). */
  --fs-giant: clamp(96px, 16vw, 240px);      /* 6 Numbers: giant numeral (300 to 380 on slide) */
  --fs-display-xl: clamp(56px, 9vw, 136px);  /* 11 Thank you (150), 3 Divider title (112) */
  --fs-display: clamp(44px, 6.2vw, 88px);    /* 1 Cover title (88, 80); 4 Statement (80) */
  --fs-h1: clamp(36px, 4.2vw, 56px);         /* page H1; campaign card title (52), what we heard (56) */
  --fs-h2: clamp(30px, 3.2vw, 44px);         /* section title: the deck's body title, 44 px (33 pt) */
  --fs-quote: clamp(26px, 3vw, 44px);        /* 4 Quote (44) */
  --fs-h3: clamp(22px, 2vw, 28px);           /* heading in a column (24 to 28) */
  --fs-h4: 22px;                             /* step or row heading (22) */
  --fs-lead: clamp(20px, 1.8vw, 26px);       /* lead paragraph, Instrument Sans (Context: 26) */
  --fs-body-l: 20px;                         /* card text that must read at distance (20) */
  --fs-body: 18px;                           /* body and bullets: deck minimum (18) */
  --fs-ui: 18px;                             /* nav, buttons, form labels, captions, legal: the locked 18px floor */
  --fs-stat-xl: clamp(64px, 8.4vw, 120px);   /* 6 Numbers: three stats (120) */
  --fs-stat-l: clamp(56px, 6.6vw, 96px);     /* Context fact, four stats (96) */
  --fs-stat: clamp(40px, 3.8vw, 54px);       /* stats in a campaign card or placemat (54) */
  --fs-eyebrow: 18px;                        /* eyebrow and section number: 18 bold, accent */

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

  /* Line heights. PowerPoint percentages are of single spacing (about 1.2 x size), converted here.
     Titles 88% -> 1.05; any headline that wraps uses this tight value (Andrew, Oct 16). */
  --lh-display: 0.98;   /* stats 85% and display 88% at large sizes */
  --lh-title: 1.05;     /* titles, 88% */
  --lh-heading: 1.14;   /* headings, 95% */
  --lh-quote: 1.3;      /* quote, 110% */
  --lh-list: 1.4;       /* bullets, 115 to 120% */
  --lh-lead: 1.45;      /* lead, 125% */
  --lh-body: 1.56;      /* body, 130% */

  /* Letter spacing. spc -150 on 33 pt titles and -200 on display (hundredths of a point). */
  --ls-display: -0.03em;
  --ls-title: -0.04em;
  --ls-heading: -0.015em;
  --ls-body: 0;
  --ls-eyebrow: 0;      /* no tracked-out caps; the deck sets eyebrows in sentence case */

  /* Measure. Deck paragraphs run about 40 words at most. */
  --measure-body: 64ch;
  --measure-lead: 38ch;
  --measure-title: 20ch;

  /* ===== Spacing =====
     Deck margin is 64 px on a 1280 canvas (5%), title line at y 56 under the logo at y 30, content width 1152.
     Base unit 8 (64 = 8 x 8). Gutters come from the deck columns: 3-up 44, 4-up 30, 5-up 22. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 96px;
  --sp-11: 128px;
  --sp-12: 160px;

  --page-margin: clamp(20px, 5vw, 64px);     /* deck: 64 / 1280 = 5% */
  --content-max: 1152px;                     /* deck content width */
  --wide-max: 1312px;                        /* full-bleed sections that still align to the margin */
  --gutter: clamp(20px, 3vw, 44px);          /* 3-up column gap */
  --gutter-tight: clamp(16px, 2.2vw, 30px);  /* 4-up and 5-up gap */
  --section-y: clamp(72px, 9vw, 128px);      /* vertical rhythm between sections */
  --title-gap: clamp(32px, 4vw, 56px);       /* title to content: deck 130 to 160 px below title line, scaled */

  /* ===== Radii =====
     Every box and photo frame is rounded; only full-bleed photos are square (SYSTEM.md).
     Deck: proof thumbs 10, hero and gallery 12 to 14, cards and panels 16 to 18. Kept at deck values for web. */
  --r-xs: 6px;      /* form inputs inner parts, tags */
  --r-s: 10px;      /* small proof thumbs, logo tiles */
  --r-m: 14px;      /* photos, campaign images */
  --r-l: 18px;      /* cards, panels, tables (rshape default) */
  --r-xl: 24px;     /* large web-only frames: hero media, CTA panel */
  --r-pill: 999px;  /* buttons and chips (the deck's outlined "Hear the call" button) */

  /* ===== Borders ===== */
  --bw-hair: 1px;
  --bw-box: 1.5px;  /* hollow box outline (spec_round3 lw 1.5) */
  --bw-focus: 2px;  /* recommended option outline (lw 2) */

  /* ===== Motion =====
     From the deck's animation timings: flywheel track 1.2 s, hub fade 0.6 s, node fades 0.25 to 0.3 s,
     staggered 0.3 s; glass mark loops (turn, assemble, ignite) run 4 s. The feel is a calm fade and settle. */
  --dur-instant: 120ms;   /* hover color */
  --dur-fast: 250ms;      /* node fade */
  --dur-base: 300ms;      /* default reveal */
  --dur-slow: 600ms;      /* hub fade, section reveal */
  --dur-reveal: 1200ms;   /* flywheel track, hero glass entrance */
  --dur-loop: 4000ms;     /* glass mark video loop (zeroed, and the video paused or hidden, under reduced motion) */
  --stagger: 300ms;       /* between items in a row */
  --ease-out: cubic-bezier(0.22, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;
  --reveal-distance: 16px;

  /* ===== Breakpoints (reference values; CSS custom properties cannot drive @media) =====
     sm 390 phone, md 768 tablet, lg 1024 small laptop, xl 1280 deck canvas, 2xl 1440 design width. */
  --bp-sm: 390px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* ===== Layers ===== */
  --z-nav: 50;
  --z-overlay: 80;
}

/* ===== Semantic roles: light scheme (default) =====
   Text on light is Ink, text on dark is white. No grey secondary text on either (Andrew, Oct 23). */
:root,
[data-scheme="light"] {
  --bg: var(--c-halo);
  --bg-raised: var(--c-surface-white);
  --panel: var(--c-tint-light);
  --text: var(--c-ink);
  --text-inverse: var(--c-white);
  --accent: var(--c-flarepop-deep);
  --accent-on-fill: var(--c-white);
  --line: var(--c-line-light);
  --line-input: #8A8A94; /* form field outline, 3.5:1 on white (WCAG 1.4.11) */
  --rule: var(--c-rule-light);
  --glass-fill: var(--glass-fill-light);
  --glass-edge: var(--glass-edge-light);
  --logo-filter: none;
  --icon-set: "angled/light-shadow";
  color-scheme: light;
}

[data-scheme="dark"] {
  --bg: var(--c-ink);
  --bg-raised: var(--c-tint-dark);
  --panel: var(--c-tint-dark);
  --text: var(--c-white);
  --text-inverse: var(--c-ink);
  --accent: var(--c-flarepop);
  --accent-on-fill: var(--c-ink);
  --line: var(--c-line-dark);
  --line-input: #6E6E7A; /* form field outline, 3.9:1 on Ink */
  --rule: var(--c-tint-dark);
  --glass-fill: var(--glass-fill-dark);
  --glass-edge: var(--glass-edge-dark);
  --logo-filter: brightness(0) invert(1);
  --icon-set: "angled/dark";
  --focus-ring: 0 0 0 3px var(--c-ink), 0 0 0 5px var(--c-flarepop);
  --c-error: #FF5C7A;            /* error on dark: 6.64:1 on Ink, 6.11:1 on the dark tint */
  color-scheme: dark;
}

/* Reduced motion: every duration is zero, including hover color and the glass loop.
   components.css also hides autoplaying glass video (.glass-video) and shows its still. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-loop: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --stagger: 0ms;
    --reveal-distance: 0px;
  }
}