:root {
  /* ===== Loocro Brand · Darkmode ===== */

  /* Surfaces — near-black with navy undertone */
  --surface-0: #050510;        /* deepest, page bg */
  --surface-1: #0a0a18;        /* section alt */
  --surface-2: #0f1024;        /* card bg */
  --surface-3: #14152e;        /* elevated card / hover */
  --surface-navy: #000d3c;     /* brand navy, pull-quote bg */
  --surface-navy-deep: #00081f;

  /* Coral — single signal accent */
  --coral: #fe5e37;
  --coral-soft: #ff7a57;
  --coral-deep: #d44827;
  --coral-glow: rgba(254, 94, 55, 0.18);

  /* Text */
  --text-pri: #ffffff;
  --text-sec: #d4d4dc;
  --text-mid: #8b8e9a;
  --text-dim: #5a5d6a;
  --text-inv: #050510;

  /* Lines & Glass */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.08);

  /* Type */
  --ff-display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Display sizes — Apple-grade scale */
  --fs-hero: clamp(2.25rem, 4.5vw, 4rem);
  --fs-h1: clamp(2rem, 3.8vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.5rem, 2.4vw, 2rem);
  --fs-lead: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-stat: clamp(2.5rem, 4.5vw, 4rem);

  /* Display tracking simulating Acumin Extra Extended */
  --display-stretch: 125%;
  --display-weight: 900;
  --display-track-tight: -0.02em;
  --display-track-wide: 0.005em;

  /* Eyebrow (uppercase label) */
  --eyebrow-track: 0.18em;

  /* Layout */
  --maxw: 1280px;
  --maxw-narrow: 920px;
  --maxw-text: 720px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  /* Radius */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 20px;
  --r-4: 28px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.34, 1.2, 0.64, 1);
  --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
  --d-1: 180ms;
  --d-2: 320ms;
  --d-3: 540ms;
  --d-4: 880ms;

  /* Shadows (subtle on dark) */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px rgba(0,0,0,0.55);
  --shadow-coral: 0 0 0 1px rgba(254,94,55,0.4), 0 12px 40px rgba(254,94,55,0.25);

  /* Z */
  --z-nav: 60;
  --z-overlay: 50;
}