/*
 * Shared marketing layout + type rhythm (Invictus + Verena static hi-fi).
 * Source of truth: iai-website — copy to verena-website/build/ when syncing.
 * Values only; program colors and font stacks live in brand token files.
 */
:root {
  --space-unit: 8px;
  --space-1: calc(var(--space-unit) * 1);
  --space-1-5: calc(var(--space-unit) * 1.5);
  --space-2: calc(var(--space-unit) * 2);
  --space-2-5: calc(var(--space-unit) * 2.5);
  --space-2-25: calc(var(--space-unit) * 2.25);
  --space-3: calc(var(--space-unit) * 3);
  --space-3-5: calc(var(--space-unit) * 3.5);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-7: calc(var(--space-unit) * 7);
  --space-8: calc(var(--space-unit) * 8);
  --space-heading-to-block: var(--space-5);

  --page-max: 1320px;
  --page-margin: clamp(20px, 5vw, 72px);
  --grid-gutter: clamp(16px, 2vw, 24px);
  --grid-columns: 12;
  --section-pad-y: clamp(3.25rem, 7vw, 5.5rem);

  --text-hero-size: clamp(2.125rem, 5.2vw, 3.5rem);
  --text-hero-line-height: 1.05;
  --text-section-size: clamp(1.5rem, 2.8vw, 2.25rem);
  --text-section-line-height: 1.12;
  --text-subsection-size: clamp(1.2rem, 2.2vw, 1.625rem);
  --text-subsection-line-height: 1.22;
  --text-subhead-line-height: 1.14;
  --text-body-size: 1rem;
  --text-body-line-height: 1.55;
  --text-nav-size-sm: 0.8125rem;
  --text-nav-size-md: 0.875rem;
  --text-nav-line-height: 1.3;
  --text-eyebrow-size: 0.625rem;
  --text-eyebrow-line-height: 1.2;
  --text-link-size: 0.9375rem;
  --text-link-line-height: 1.4;
  --text-lead-size: clamp(1.0625rem, 1.65vw, 1.25rem);
  --text-lead-line-height: 1.55;
  --text-cta-size: 0.8125rem;
  --text-cta-line-height: 1.2;
  /* Label beside ~32px (--space-4) brand lockup in hero (e.g. Invictus glass “Make it” + mark); between CTA chrome and body. */
  --text-hero-lockup-label-size: clamp(0.875rem, 1.2vw, 1rem);
  --text-hero-lockup-label-line-height: 1.3;
  --text-caption-size: 0.75rem;
  --text-micro-size: 0.6875rem;
  --text-chat-body-size: 0.9375rem;
  /* Section intro lede (e.g. How it works) */
  --text-intro-lede-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  --width-hiw-chat-demo: 904px;
  --text-card-title-size: 1.25rem;
  --text-card-title-line-height: 1.25;
  --line-height-relaxed: 1.5;
  --line-height-micro: 1.45;

  --radius-ui: 2px;
  /* Illustrative chat / transcript chrome (shared across hi-fi demos) */
  --radius-chat-bubble: 18px;
  --radius-chat-bubble-tail: 4px;
  --focus-outline-width: 2px;
  --focus-offset-tight: 2px;
  --focus-offset-loose: 4px;
  --text-underline-offset-nav: 4px;

  --pad-nav-link-y: 10px;
  --pad-nav-link-x: 12px;
  --pad-cta-y: 8px;
  --pad-cta-x: 14px;
  --pad-header-y: 14px;
  --pad-header-x: var(--space-3);
  --pad-chat-bubble-x: 14px;
  --pad-chat-bubble-y: 10px;
  --pad-input-x-comfort: 18px;

  --size-control-sm: 40px;
  --size-control-md: 48px;
  --size-control-lg: 56px;
  --size-header-min-h-sm: 76px;
  --size-header-min-h-lg: 80px;
  --size-nav-toggle: 44px;
  /* Video / media play control (min touch + visual weight) */
  --size-play-disc: 56px;
  --size-logo-h: clamp(26px, 3.8vw, 34px);

  --site-header-offset-sm: 76px;
  --site-header-offset-lg: 80px;
  --site-header-offset: var(--site-header-offset-sm);
  --site-header-h: 84px;
}

@media (min-width: 900px) {
  :root {
    --site-header-offset: var(--site-header-offset-lg);
  }
}