/* ============================================================
   GEROTECH — DESIGN TOKENS
   All color/spacing/radius changes go here first.
   Updated from Figma redesign (2026-07-13).
   Font: Navigo (Adobe Fonts) — site-wide
   ============================================================ */

:root {
  /* ── Brand Colors ─────────────────────────────────────── */
  --clr-orange:        #F38A2C;
  --clr-orange-light:  #F9A94A;
  --clr-orange-deep:   #B45000;   /* accessible orange for text/icons on LIGHT surfaces (~5.1:1 on white) */
  --clr-haas-red:      #CF0A2C;   /* Haas brand red — homepage hero + HFO lockup words */
  --clr-haas-red-dark: #B00926;   /* Haas red hover/active */
  --clr-ink:           #0D0D0D;
  --clr-dark-bg:       #1C1C21;
  --clr-dark-band:     #242426;
  --clr-dark-nav:      #3A3A40;
  --clr-gray-body:     #6B6B76;          /* Figma: IBM Plex Sans body */
  --clr-gray-muted:    #9A9AA8;
  --clr-gray-border:   #E4E4EA;          /* Figma: header bottom border */
  --clr-gray-input:    #D6D6D6;          /* Figma: email signup input border */
  --clr-gray-dot:      #C9C9D2;          /* Figma: inactive testimonial dot */
  --clr-gray-card:     #F9F9FB;
  --clr-gray-band:     #F2F2F2;
  --clr-white:         #FFFFFF;
  --clr-black:         #000000;

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'Barlow Condensed', sans-serif;   /* Headlines — Google Fonts (condensed, industrial) */
  --font-sans:    'navigo', sans-serif;             /* Body / UI — Adobe Fonts */

  /* The Adobe Fonts kit serves Navigo 400 + 700 only (plus italics).
     Barlow Condensed (Google Fonts) is loaded at 500/600/700.
     --fw-bold (700) now renders as Barlow Condensed 700 for display;
     600 = semi-bold for most headlines (visually matches Navigo 700). */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 700;

  /* ── Type Scale (fluid display tiers, fixed text tiers) ── */
  /* Barlow Condensed is narrower than Navigo — display tiers run bigger
     (~25-28% larger) to preserve visual weight and presence. */
  --fs-hero:    clamp(40px, 8vw, 106px);           /* page hero statements */
  --fs-display: clamp(36px, 6vw + 6px, 78px);      /* secondary heroes */
  --fs-h1:      clamp(34px, 4.5vw, 64px);          /* feature headlines */
  --fs-h2:      clamp(30px, 2.6vw + 12px, 50px);   /* section titles */
  --fs-h3:      clamp(26px, 2vw + 9px, 40px);      /* sub-section titles */
  --fs-h4:      clamp(20px, 0.9vw + 16px, 26px);   /* card / feature titles */
  --fs-stat:    clamp(34px, 3vw + 16px, 48px);     /* stat numerals */
  --fs-lede:    18px;                              /* ledes, quotes */
  --fs-body:    16px;
  --fs-ui:      14px;
  --fs-caption: 12px;

  /* ── Tracking (tightens as display size grows) ────────── */
  /* Barlow Condensed has narrower glyphs — less negative tracking avoids a cramped look. */
  --ls-hero:    -0.015em;
  --ls-display: -0.012em;
  --ls-h1:      -0.01em;
  --ls-h2:      -0.008em;
  --ls-h3:      -0.005em;
  --ls-h4:      -0.01em;
  --ls-caps:    0.14em;   /* eyebrows / section labels */
  --ls-meta:    0.08em;   /* card-level uppercase labels */

  /* ── Leading ──────────────────────────────────────────── */
  /* Barlow Condensed has a tighter x-height — headlines can sit closer. */
  --lh-hero: 1.0;
  --lh-h1:   1.05;
  --lh-h2:   1.1;
  --lh-h3:   1.15;
  --lh-h4:   1.2;
  --lh-body: 1.7;

  /* ── Spacing Scale ────────────────────────────────────── */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-120: 120px;

  /* ── Section rhythm (site-wide vertical padding) ───────── */
  --section-y:    88px;   /* desktop / tablet */
  --section-y-sm: 64px;   /* ≤768px */
  --section-y-xs: 56px;   /* ≤480px */
  /* Full-bleed hero-adjacent bands (machine-lineup, haas top, cinema CTA).
     Self-scaling clamp so these scale with the token system automatically. */
  --section-y-lg: clamp(72px, 8.5vw, 120px);

  /* ── Border Radius ────────────────────────────────────── */
  --radius-btn:     8px;
  --radius-card:    0;
  --radius-card-lg: 0;
  --radius-pill:    99px;

  /* ── Surface tints ────────────────────────────────────── */
  --clr-orange-tint: rgba(243, 138, 44, 0.1);
  --clr-ink-tint:    rgba(13, 13, 13, 0.04);

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-card:       0 4px 24px rgba(0, 0, 0, 0.07);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.13);
  --shadow-nav:        0 2px 16px rgba(0, 0, 0, 0.06);  /* Figma: header shadow */

  /* ── Layout ───────────────────────────────────────────── */
  --max-home: 1200px;    /* Figma: 1440px design, 120px side padding = 1200px content */
  --max-es:   1200px;    /* unified to --max-home so hero / stat-counter / body left edges align site-wide */
  --hero-copy-max: 820px; /* left-aligned hero headline + body column */

  /* ── Motion ───────────────────────────────────────────── */
  --ease: 0.22s ease;
  --ease-slow: 0.35s ease;
  --ease-spring: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Enhanced shadows ───────────────────────────────── */
  --shadow-btn:        0 2px 8px rgba(243, 138, 44, 0.25);
  --shadow-btn-hover:  0 8px 24px rgba(243, 138, 44, 0.35);
  --shadow-elevated:   0 12px 48px rgba(0, 0, 0, 0.1);

  /* ── Z-Index ──────────────────────────────────────────── */
  --z-alert:    300;
  --z-header:   200;
  --z-dropdown: 100;
}