/* ==========================================================================
   AIFoundri ODM/OEM design tokens
   Reference system: extracted from replay.ai on 2026-11-06 (tokens only).
   Brand-neutral: no reference logos, names, images or copy live here.
   Values match replay_design_tokens.json / Replay_variables_css.css; this
   file adds semantic aliases, fluid type, shadows, motion and textures.
   ========================================================================== */

/* Free fonts. Geist + Geist Mono are the reference's own (OFL) faces.
   The reference display serif (STK Bureau Serif) is licensed, so Newsreader
   stands in (the reference site already loads Newsreader on sub-pages). */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=Geist+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap");

:root {
  /* ---------- Raw palette ---------- */
  --color-ink-black: #141518;        /* primary buttons, dark text on light cards */
  --color-headline-black: #000000;   /* serif headlines on light, active tab */
  --color-body-slate: #727272;       /* paragraph copy, light AND dark sections */
  --color-nav-gray: #777777;         /* nav links (hover -> ink-black) */
  --color-fog-gray: #6b6b6b;         /* mono micro labels, HUD metadata */
  --color-blueprint-gray: #a8a8a8;   /* dashed construction grid lines */
  --color-rule-gray: #d4d4d4;        /* dashed section dividers */
  --color-tab-gray: #cccccc;         /* tab and chip borders */
  --color-paper-white: #fcfcfc;      /* base canvas (under grain) */
  --color-pure-white: #ffffff;
  --color-mist-lavender: #eaebf1;    /* cool light band */
  --color-midnight-navy: #133264;    /* brand gradient top */
  --color-signal-blue: #147dba;      /* brand gradient bottom */
  --color-sky-signal: #499df8;       /* progress fills, highlight bars */
  --color-scanner-cyan: #25fff9;     /* active status dot only */
  --color-night-black: #0c0c0b;      /* dark process band */
  --color-void-black: #080808;       /* footer */
  --color-panel-line-dark: #383535;  /* 1px frame on dark panels */

  /* Illustration-only "data stripe" colors. Never for text, buttons or bands. */
  --data-sky: #499df8;
  --data-azure: #13a8ff;
  --data-ocean: #118ecc;
  --data-teal: #4ed3cf;
  --data-olive: #54702f;
  --data-highlighter: #eae058;
  --data-peach: #f5e4d8;
  --data-ice: #e3edf3;

  /* ---------- Semantic colors ---------- */
  --bg-canvas: var(--color-paper-white);
  --bg-band-cool: var(--color-mist-lavender);
  --bg-band-brand: linear-gradient(180deg, var(--color-midnight-navy) 27%, var(--color-signal-blue) 144%);
  --bg-band-dark: var(--color-night-black);
  --bg-footer: var(--color-void-black);
  --bg-card-hatched: #e4e5ea;        /* perceived card tone under hatch texture */

  --text-strong: var(--color-headline-black);
  --text-default: #171717;
  --text-muted: var(--color-body-slate);
  --text-subtle: var(--color-fog-gray);
  --text-on-dark: var(--color-pure-white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.6);
  --text-eyebrow: rgba(0, 0, 0, 0.6);
  --text-eyebrow-on-dark: rgba(255, 255, 255, 0.6);

  --border-grid: 1px dashed var(--color-blueprint-gray);
  --border-section: 1px dashed var(--color-rule-gray);
  --border-faint: 1px dashed rgba(0, 0, 0, 0.08);
  --border-chip: 1px dashed rgba(0, 0, 0, 0.25);
  --border-chip-on-dark: 1px dashed rgba(255, 255, 255, 0.3);
  --border-faq: 1px dashed rgba(0, 0, 0, 0.15);
  --border-tab: 1px solid var(--color-tab-gray);
  --border-panel-dark: 1px solid var(--color-panel-line-dark);

  --action-bg: var(--color-ink-black);
  --action-fg: var(--color-pure-white);
  --action-outline: 1px solid var(--color-ink-black);

  /* ---------- Font families ---------- */
  --font-display: "stkBureauSerif", "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-display-free: "Newsreader", "Source Serif 4", ui-serif, Georgia, serif; /* use this one in our build */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------- Weights ---------- */
  --font-weight-regular: 400;   /* all serif type, body */
  --font-weight-medium: 500;    /* CTA label, small sans labels */

  /* ---------- Type scale (desktop px, fluid where it changes on mobile) ---------- */
  --text-caption: 10px;      --leading-caption: 1.5;     --tracking-caption: 0.08em;     /* mono, uppercase */
  --text-micro: 8px;         --leading-micro: 1.5;       --tracking-micro: 0.025em;      /* HUD strips, mono uppercase */
  --text-body-sm: 14px;      --leading-body-sm: 1.43;    --tracking-body-sm: -0.025em;
  --text-body: clamp(14.5px, 13.9px + 0.15vw, 16px);
                             --leading-body: 1.4;        --tracking-body: -0.03em;
  --leading-body-relaxed: 1.625;                         /* step / accordion body */
  --text-label: 12px;        --leading-label: 1.33;      --tracking-label: 0.025em;      /* sans uppercase step labels */
  --text-mono-list: 16px;    --leading-mono-list: 1.5;   --tracking-mono-list: -0.007em; /* uppercase data lists */
  --text-mono-link: 14px;    --leading-mono-link: 1.3;   --tracking-mono-link: 0.06em;   /* footer links */
  --text-tab: 18px;          --leading-tab: 1.55;        --tracking-tab: 0;
  --text-subheading: 22px;   --leading-subheading: 1;    --tracking-subheading: -0.04em; /* FAQ question */
  --text-heading-sm: 24px;   --leading-heading-sm: 1.1;  --tracking-heading-sm: -0.01em;
  --text-tier: 27px;         --leading-tier: 1.04;       --tracking-tier: -0.02em;       /* price-tier numerals */
  --text-heading: clamp(24px, 20.3px + 0.95vw, 32px);
                             --leading-heading: 1.1;     --tracking-heading: -0.025em;
  --text-heading-lg: clamp(36px, 33px + 0.77vw, 44px);
                             --leading-heading-lg: 1;    --tracking-heading-lg: -0.025em; /* -0.04em for tighter H2s */
  --text-cta: clamp(36px, 30.8px + 1.33vw, 50px);
                             --leading-cta: 1;           --tracking-cta: -0.043em;
  --text-display-alt: clamp(44px, 36.6px + 1.9vw, 64px);
                             --leading-display-alt: 1.1; --tracking-display-alt: -0.04em; /* stats */
  --text-display: clamp(42px, 25.6px + 4.2vw, 72px);
                             --leading-display: 1;       --tracking-display: -0.04em;     /* hero H1 */

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;
  --space-28: 112px;
  --space-40: 160px;

  /* ---------- Layout ---------- */
  --page-max-width: 1560px;          /* outer frame cap */
  --frame-gutter: clamp(12px, 9.4vw - 24px, 72px); /* 12px mobile -> 72px from ~1024px; dashed frame lines sit here */
  --content-inset: clamp(12px, 2.8vw, 40px); /* inner padding inside the frame */
  --content-narrow: 669px;           /* hero sub, centered copy */
  --content-headline: 840px;         /* hero H1 measure */
  --content-half: 648px;             /* one column of a 2-col split */
  --section-pad-y: clamp(64px, 6vw, 112px);
  --section-pad-y-tight: clamp(48px, 4.5vw, 64px);
  --nav-height: 64px;
  --card-padding: clamp(24px, 2.8vw, 40px);
  --element-gap: 24px;
  --grid-gap: 24px;
  --grid-columns: 12;

  /* ---------- Radii ---------- */
  --radius-none: 0px;   /* buttons, cards, tabs, inputs, nav, chips */
  --radius-xs: 2px;     /* tiny chips inside illustrations */
  --radius-full: 9999px;/* status dots */

  /* ---------- Shadows (deliberately almost none) ---------- */
  --shadow-none: none;
  --shadow-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  --shadow-ring-strong: inset 0 0 0 1.5px rgba(0, 0, 0, 0.3);
  --shadow-bar-top: 0 -2px 12px rgba(0, 0, 0, 0.04); /* bottom-fixed bars only */

  /* ---------- Textures (supply our own SVG/WebP assets) ---------- */
  --texture-grain: url("./assets/grain-light.svg");      /* fine noise over light canvas */
  --texture-hatch: url("./assets/hatch-diagonal.svg");   /* diagonal hatch on light cards */
  --texture-guilloche: url("./assets/guilloche.svg");    /* banknote line pattern in illustrations */

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* color/opacity hovers */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);          /* fades, accordion rows */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* clip-path wipes, illustration builds */
  --ease-snap: cubic-bezier(0.23, 1, 0.32, 1);     /* press feedback, blur reveals */
  --ease-in-out-sine: cubic-bezier(0.65, 0, 0.35, 1); /* header dock/undock */
  --ease-in: cubic-bezier(0.4, 0, 0.9, 1);
  --duration-instant: 150ms;   /* hover color, button press */
  --duration-fast: 200ms;      /* header, FAQ toggle, fades */
  --duration-base: 300ms;
  --duration-wipe: 420ms;      /* clip-path reveal */
  --duration-slow: 500ms;      /* blur reveal, nav slide */
  --duration-reveal: 800ms;    /* section fade-in */
  --press-scale: 0.97;
  --reveal-blur: 10px;
  --reveal-shift: 16px;
}

/* ---------- Motion primitives ---------- */
@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-fade-blur { from { opacity: 0; filter: blur(var(--reveal-blur)); } to { opacity: 1; filter: blur(0); } }
@keyframes reveal-fade-slide { from { opacity: 0; transform: translateY(var(--reveal-shift)); } to { opacity: 1; transform: none; } }
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
    --duration-wipe: 0ms; --duration-slow: 0ms; --duration-reveal: 0ms;
    --press-scale: 1;
  }
}