/* Fabricio Lujano · design tokens v3 · "Punto de fuga"
   Shared by: landing v3, per-lead diagnosis page, lead magnet, Instagram templates. */
:root {
  /* Color: surfaces */
  --paper: #EEE8DE;
  --paper-2: #E3DBCE;          /* = portrait backdrop */
  --night: #13110F;
  --night-2: #1E1B17;
  --night-edge: #0C0B0A;       /* hero vignette edge only */

  /* Color: text */
  --ink: #16120E;              /* 15.3:1 on paper */
  --ink-2: #4A433B;            /* 8.0:1 on paper */
  --ink-3: #675E53;            /* 5.2:1 on paper, 4.6:1 on paper-2 */
  --bone: #EEE8DE;             /* 15.5:1 on night */
  --bone-2: #A79D90;           /* 7.1:1 on night */

  /* Color: the leak point (single semantic accent) */
  --signal: #FF4F00;           /* shapes anywhere; text only on night (5.7:1) */
  --signal-ink: #AD3600;       /* accent TEXT on paper (5.2:1) */
  --signal-press: #E54600;
  /* text on signal buttons: warm white (Fabricio, 2026-11-11). WCAG 2: 3.20:1 (AA large: buttons use 19px/700,
     above the 18.66px bold threshold); APCA Lc -62 (ink on signal was Lc 44). On --signal-press: 3.91:1, Lc -69. */
  --on-signal: #FFFBF5;
  --on-signal-line: rgba(255, 251, 245, .34);   /* the divider before the arrow */

  /* Color: lines */
  --line: rgba(22, 18, 14, .14);
  --line-strong: rgba(22, 18, 14, .32);
  --line-night: rgba(238, 232, 222, .14);
  --field-border-night: rgba(238, 232, 222, .22);
  --perspective-line: rgba(22, 18, 14, .08);

  /* Fictional client (phone screens only, never in Fabricio's UI) */
  --fx-bg: #FFFFFF;
  --fx-text: #1F2326;
  --fx-muted: #5B6168;
  --fx-brand: #23483D;

  /* Typography */
  --font-sans: "Chivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-numeral: clamp(7rem, 1.5rem + 20vw, 22rem);
  --fs-mega: clamp(3.25rem, 1rem + 9.4vw, 11.5rem);
  --fs-display: clamp(2.5rem, 1.2rem + 5.4vw, 7rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --fs-small: .9375rem;
  --fs-mono: .8125rem;

  --lh-numeral: .8;
  --lh-mega: .86;
  --lh-display: .92;
  --lh-h3: 1.08;
  --lh-lead: 1.4;
  --lh-body: 1.55;

  --tr-numeral: -.06em;
  --tr-mega: -.055em;
  --tr-display: -.045em;
  --tr-h3: -.02em;
  --tr-mono: .06em;

  --fw-body: 400;
  --fw-ui: 500;
  --fw-strong: 700;
  --fw-display: 800;
  --fw-mega: 900;

  --measure: 64ch;
  --measure-tight: 46ch;

  /* Layout */
  --maxw: 1320px;
  --gutter: clamp(16px, 4.5vw, 64px);
  --col-gap: clamp(12px, 1.6vw, 24px);
  --cols: 4;                   /* 8 at >=640px, 12 at >=1024px */
  --wrap: calc(var(--maxw) + 2 * var(--gutter));

  /* Spacing (base 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --sec-tight: clamp(4rem, 3rem + 4vw, 7rem);
  --sec-loose: clamp(6rem, 4rem + 8vw, 12rem);

  /* Shape */
  --r-0: 0;                    /* images, documents, sections, fact cards */
  --r-1: 3px;                  /* buttons, inputs, segmented options */
  --r-pill: 999px;             /* chapter chips only */
  --stroke: 1px;
  --stroke-icon: 1.5px;
  --dot: 9px;                  /* leak point anchor */
  --dot-small: 7px;            /* chips, selected option, inline marks */

  /* Elevation (warm, used only on the diagnosis letter and fact cards) */
  --shadow-lift: 0 1px 0 rgba(22, 18, 14, .06), 0 24px 48px -24px rgba(74, 42, 18, .30);

  /* Controls */
  --control-h: 56px;
  --control-h-compact: 44px;
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
  --focus-ring-night: 0 0 0 2px var(--night), 0 0 0 4px var(--bone);

  /* Motion */
  --ease-out: cubic-bezier(.23, 1, .32, 1);      /* UI feedback */
  --ease-enter: cubic-bezier(.16, 1, .3, 1);     /* reveals */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* scrubbed handoffs */
  --dur-press: 120ms;
  --dur-ui: 180ms;
  --dur-icon: 220ms;
  --dur-draw: 400ms;
  --dur-pulse: 700ms;
  --dur-enter: 900ms;
  --stagger: 60ms;

  /* Layers */
  --z-stage: 1;
  --z-content: 2;
  --z-bar: 50;
  --z-topbar: 60;
}

@media (min-width: 640px) { :root { --cols: 8; } }
@media (min-width: 1024px) { :root { --cols: 12; } }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-draw: 0ms;
    --dur-pulse: 0ms;
    --dur-enter: 0ms;
    --stagger: 0ms;
  }
}

/* Additions from 05-build-spec §3 */
:root {
  --fs-hero:  clamp(2.5rem, 1.1rem + 6.4vw, 8.5rem);    /* H1: 43px at 390, 110px at 1440 */
  --fs-stage: clamp(1.75rem, .9rem + 3.85vw, 5rem);     /* headings inside the pinned stage */
  --lh-hero: .9;
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --dur-swap-out: 180ms;
  --dur-swap-in: 420ms;
  --reveal-y: 14px;
  --bar-h: 72px;                                        /* mobile sticky bar, without safe area */
  --film-d: 600svh;                                     /* pinned scroll length */
  --word-ink: #E2D9CA;                                  /* chapter word behind the phone: paper, one step darker */
}