/*
  Design tokens for Infleqtion.
  Source: Figma file INF26001_Development → file-level Variables + per-section extraction.

  Color tokens are 1:1 with Figma Variables (kebab-cased).
  Typography, spacing, radius, and shadow tokens are added incrementally
  as each section is built.

  Follow-ups for the designer:
  - "Line gradient" variable exists in Figma but is empty.
  - "Body Copy" (#717171) vs "Body Copy Text" (#525252) — which is canonical?
*/

:root {
  /* ---------------------------------------------------------------
     Colors — from Figma Variables
     --------------------------------------------------------------- */
  --color-navy-blue: #000919;
  --color-black: #04061B;
  --color-navy: #131A5D;
  --color-body-copy: #717171;
  --color-body-copy-text: #525252;
  --color-border: #B2B2B2;
  --color-card-border: #D7D7D7;
  --color-white: #FFFFFF;        /* brand white — explicit token so panels that overlap dark sections always render solid */
  --color-surface-alt: #F3F3F3;  /* light-grey section surface — covers the body dot-pattern for sections that need a solid canvas */
  --color-teal: #41E0D1;
  --color-green-2: #20BA2F;
  --color-green-tint: #F2FBF2;   /* light green surface — e.g. table zebra rows */
  --color-green-glow: #63CF6D;   /* green glow — product-evolution current card, image halos */
  /* --color-line-gradient: TBD — empty in Figma */

  /* Semantic aliases — adjust if these guesses are wrong */
  --color-text-body: var(--color-body-copy-text);
  --color-text-muted: var(--color-body-copy);
  --color-text-heading: var(--color-navy-blue);
  --color-text-on-dark: #FFFFFF;
  --color-background: #FFFFFF;
  --color-background-dark: var(--color-navy-blue);
  --color-accent: var(--color-teal);

  /* ---------------------------------------------------------------
     Typography
     Pattern: small UI sizes stay fixed; display/heading sizes use clamp()
     to scale fluidly between mobile and desktop.
     --------------------------------------------------------------- */
  /* Two font families: Poppins for UI/body (Google Fonts),
     New Science for display/headings (Adobe Fonts, kit poh4eva). */
  --font-family-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --font-family-display: "new-science", "Poppins", system-ui, sans-serif;

  --font-size-eyebrow: 12px;     /* breadcrumb / section eyebrows */
  --font-size-sm: 14px;          /* nav links, button label */
  --font-size-body: 16px;        /* card descriptions */
  --font-size-body-lg: 18px;     /* hero subheading, section subheadings */
  --font-size-h4: 20px;          /* card titles */
  --font-size-stat: 24px;        /* performance/spec values, stat numbers */
  --font-size-h3: clamp(24px, 22px + 0.5vw, 30px);  /* product group titles */
  --font-size-h2: clamp(32px, 24px + 2.3vw, 60px);  /* section headings */
  --font-size-display-1: clamp(48px, 6vw, 80px);    /* hero headline */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --line-height-tight: 1;        /* leading-none in Figma */
  --line-height-card-title: 1.4; /* 28/20 for 20px card titles */
  --line-height-relaxed: 1.4;    /* hero subheading */
  --line-height-loose: 1.6;      /* body, card descriptions, section subheadings */

  --letter-spacing-wide: 2.4px;  /* eyebrow / breadcrumb uppercase */

  /* ---------------------------------------------------------------
     Spacing — named by px value to match Figma extraction
     --------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 13px;
  --space-4: 14px;
  --space-4_5: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-7_5: 30px;
  --space-9: 36px;
  --space-10: 40px;
  --space-20: 80px;

  /* Fluid horizontal page padding.
     Scales smoothly: 20px on mobile → 80px on wide screens.
     Use this for the "outer" inline padding on any section. */
  --space-inline: clamp(20px, 5vw, 80px);

  /* ---------------------------------------------------------------
     Radius
     --------------------------------------------------------------- */
  --radius-pill: 80px;

  /* ---------------------------------------------------------------
     Component sizing
     --------------------------------------------------------------- */
  /* Rendered height of a .btn: vertical padding (2×space-4) + the label
     line (font-size-sm at line-height 1) + 1px top/bottom border = 44px.
     Used to reserve a CTA's footprint when an optional button is absent
     so the section height stays consistent. */
  --btn-height: calc(var(--space-4) * 2 + var(--font-size-sm) + 2px);

  /* ---------------------------------------------------------------
     Shadow — added per-section as encountered
     --------------------------------------------------------------- */
  --shadow-image-glow: 0 0 40px 0 var(--color-green-glow);  /* green halo behind dark-panel feature images (Figma "Image Drop Shadow") */

  /* ---------------------------------------------------------------
     Layout
     --------------------------------------------------------------- */
  --breakpoint-md: 768px;        /* mobile → desktop */
  --container-max: 1600px;       /* desktop frame width */
  /* Section vertical padding: flat 40px below laptop, 60px at ≥1024px
     (override block below). Sections that opt in use
     `padding-block: var(--section-padding-block)`. Clamp-based or
     otherwise non-40px sections (hero, alt-second-level-hero, nav) keep
     their own values and don't reference this token. */
  --section-padding-block: 40px;
  /* Usable content width = frame minus the two page gutters. A padded
     `.__inner` (max-width + padding-inline on one element) lands here
     automatically; sections whose visible box must align to those same
     edges (e.g. the product-evolution dark panel, product-specs table)
     cap at this instead of --container-max. */
  --content-max: calc(var(--container-max) - 2 * var(--space-inline));
}

/* ---------------------------------------------------------------
   Section vertical padding step — laptop and up.
   Below 1024px sections keep 40px top/bottom; at laptop width and
   above they grow to 60px. A single hard step (not a clamp) per the
   request; only sections referencing --section-padding-block change.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --section-padding-block: 60px;
  }
}

/* ---------------------------------------------------------------
   Wide-screen scaling pass (≥1600px).

   Existing tokens above use clamp() that interpolates 360→1600. They
   cap at 1600. This block adds a SECOND fluid range that picks up at
   exactly 1600 and grows toward the wide-screen targets (Figma node
   431:703 frame at 2500px viewport). Each new clamp evaluates to
   exactly the previous cap at viewport=1600 (smooth handoff, no jump)
   and exactly the new cap at viewport=2500. Above 2500 the values
   hold at the new cap.

   Formula (per the project's fluid-first convention in CLAUDE.md):
     slope_per_px = (new_cap - prev_cap) / (2500 - 1600) = Δ / 900
     intercept    = prev_cap - slope_per_px × 1600
     clamp        = clamp(prev_cap, <intercept>px + <slope_per_px × 100>vw, new_cap)

   This block is intentionally site-wide — every section that uses
   these tokens automatically scales up consistently above 1600.
   --------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root {
    /* Outer page gutters: 80 → 260 over 1600→2500.
       slope = 180/900 = 0.2/px = 20vw/100, intercept = 80 - 0.2×1600 = -240. */
    --space-inline: clamp(80px, -240px + 20vw, 260px);

    /* Frame max-width: 1600 → 2500 over 1600→2500.
       Container fills the viewport on this range (after subtracting the
       internal padding-inline gutters). At viewport=2500, container = 2500
       and content area = 2500 − 2×260 = 1980, matching Figma's 1980-wide
       inner rectangle. Above 2500 the container caps and outer whitespace
       appears beyond the section frame.
       slope = 1.0/px = 100vw/100, intercept = 0. */
    --container-max: clamp(1600px, 100vw, 2500px);

    /* Eyebrow type + tracking: 12→14px and 2.4→2.8px. */
    --font-size-eyebrow: clamp(12px, 8.444px + 0.222vw, 14px);
    --letter-spacing-wide: clamp(2.4px, 1.689px + 0.0444vw, 2.8px);

    /* Section headings (H2): 60 → 72. */
    --font-size-h2: clamp(60px, 38.667px + 1.333vw, 72px);

    /* Hero subheading / section subheadings: 18 → 20. */
    --font-size-body-lg: clamp(18px, 14.444px + 0.222vw, 20px);

    /* Card titles (h4): 20 → 28. Largest jump in this pass. */
    --font-size-h4: clamp(20px, 5.778px + 0.889vw, 28px);

    /* Body copy / card descriptions: 16 → 18. */
    --font-size-body: clamp(16px, 12.444px + 0.222vw, 18px);
  }
}