/* ==========================================================================
   LightBOX Medical Technology — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Palette is derived from the brand logo (navy #263880, mid blue #99B9E0,
   pale blue #D1DAEB) blended with the deep-tech hero direction from the
   design brief (#0A0F1E / #00A3FF). Do not hard-code raw hex values
   anywhere else in the CSS — reference these variables instead.
   ========================================================================== */

:root {
  /* ---------- Brand blues (from the logo) ---------- */
  --brand-navy: #263880;       /* logo wordmark + dark swirl segment */
  --brand-navy-700: #1C2C63;   /* darker, for hover states on light bg */
  --brand-mid: #5FA8E8;        /* bridge tone: logo mid-blue -> electric blue */
  --brand-pale: #C9D8EF;       /* logo pale swirl segment, softened */

  /* ---------- Deep-tech navy scale (hero + dark sections) ---------- */
  --navy-950: #070B15;         /* deepest background */
  --navy-900: #0A0F1E;         /* primary dark background (brief spec) */
  --navy-800: #111A34;         /* elevated dark surface / cards */
  --navy-700: #1B2648;         /* dark borders / dividers */
  --navy-600: #2A3763;         /* dark muted surface */

  /* ---------- Electric accent ---------- */
  --electric: #00A3FF;         /* primary accent (brief spec) */
  --electric-2: #33C7FF;       /* lighter accent for glows/gradients */
  --electric-dim: #0072B5;     /* pressed / darker accent */

  /* ---------- Neutrals ---------- */
  --white: #FFFFFF;
  --ice: #F5F8FD;              /* light section background */
  --ice-100: #EDF2FA;          /* light section alt background */
  --line-light: #E1E8F4;       /* hairline borders on light bg */
  --ink: #0B1220;              /* primary text on light bg */
  --ink-soft: #4B566E;         /* secondary text on light bg */
  --mist: #AEB9D4;             /* secondary text on dark bg */
  --mist-dim: #7C88A8;         /* tertiary text on dark bg */

  /* ---------- Semantic aliases ---------- */
  --bg-dark: var(--navy-900);
  --bg-dark-elevated: var(--navy-800);
  --bg-light: var(--white);
  --bg-light-alt: var(--ice);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--mist);
  --text-on-light: var(--ink);
  --text-on-light-muted: var(--ink-soft);
  --accent: var(--electric);
  --border-dark: rgba(255, 255, 255, 0.10);
  --border-dark-strong: rgba(255, 255, 255, 0.16);
  --glass-fill: rgba(255, 255, 255, 0.05);
  --glass-fill-strong: rgba(255, 255, 255, 0.08);

  /* ---------------------------------------------------------------------
     WhatsApp accent — deliberately NOT stock WhatsApp green. A muted
     blue-green that still reads as "chat" but stays inside the brand
     palette instead of clashing with it (per client feedback). Darkened
     from the first pass — the lighter version failed WCAG contrast for
     the white icon/text sitting on top of it (verified >= 4.5:1 at
     every point across the gradient).
     --------------------------------------------------------------------- */
  --whatsapp-teal: #1C7C70;
  --whatsapp-teal-dim: #0E5449;

  /* ---------------------------------------------------------------------
     Products page accents — a true "status" green for the live-catalog
     indicator dot (distinct from the WhatsApp teal, which is
     deliberately blue-leaning), and a warm amber as a fourth category
     color so the four category dots are all clearly distinguishable.
     --------------------------------------------------------------------- */
  --status-green: #22C55E;
  --accent-amber: #C8862A;
  --accent-amber-dim: #8F5F1C;
  --accent-amber-soft: #EADFC7;

  /* Warm neutral gray, deliberately distinct from the cool blue-grays
     above (--ice, --ice-100) — used for the "ash" gradient sections on
     product detail pages (LB3's video section, iVA+'s gallery section). */
  --ash: #E7E5E0;

  /* ---------- Typography ---------- */
  --font-display: 'Clash Display', 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Fluid type scale (clamp: min, preferred-vw, max)
     Trimmed down from the first pass — headings were reading oversized
     and heavy at the top of the clamp range across several sections. */
  --fs-eyebrow: 0.8125rem;
  --fs-body-sm: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.1875rem;
  --fs-h5: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-h4: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --fs-h1: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-widest: 0.18em;

  /* ---------- Spacing (8px system) ---------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --space-9: 160px;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ---------- Shadow (navy-tinted, never pure black) ---------- */
  --shadow-sm: 0 2px 8px rgba(9, 14, 30, 0.08);
  --shadow-md: 0 10px 30px rgba(9, 14, 30, 0.12);
  --shadow-lg: 0 24px 60px rgba(9, 14, 30, 0.18);
  --shadow-glow-electric: 0 0 0 1px rgba(0, 163, 255, 0.35), 0 8px 30px rgba(0, 163, 255, 0.35);
  --shadow-glow-soft: 0 0 60px rgba(0, 163, 255, 0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-slower: 900ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-narrow: 860px;
  --header-h: 84px;
  --header-h-scrolled: 68px;

  /* ---------- Z-index scale ---------- */
  --z-base: 1;
  --z-elevated: 10;
  --z-header: 100;
  --z-whatsapp: 90;
  --z-overlay: 150;
  --z-modal: 200;
}