/* ==========================================================================
   DIGITAL INERTIA — DESIGN TOKENS
   Premium white-dominant corporate theme (McKinsey / BCG / Deloitte tier).
   Every color, space and easing curve in the site is derived from these
   variables — nothing is hard-coded downstream.
   ========================================================================== */

:root {
  /* ---- Brief palette: primary light-theme roles ---- */
  --bg-primary: #ffffff;      /* Primary background */
  --bg-secondary: #fafafa;    /* Secondary background */
  --bg-alt: #f5f5f5;          /* Alternate section background */
  --card-bg: #ffffff;         /* Cards */
  --border-color: #e5e5e5;    /* Borders */
  --text-primary: #111111;    /* Text primary */
  --text-secondary: #555555;  /* Text secondary */
  --text-muted: #888888;      /* Muted */
  --btn-bg: #000000;          /* Buttons */
  --btn-text: #ffffff;        /* Button text */
  --btn-hover: #222222;       /* Hover */

  /* ---- Color: legacy monochrome tokens, remapped onto the light system ----
     Kept so every existing selector in style.css / utilities.css continues
     to work unchanged — only the values move from "dark UI" to "light UI". */
  --c-black: #000000;
  --c-black-soft: #0a0a0a;
  --c-dark: #1a1a1a;
  --c-mid: #cccccc;
  --c-line: var(--border-color);
  --c-light: var(--text-muted);
  --c-white: var(--text-primary);
  --c-white-soft: var(--text-secondary);
  --c-white-faint: rgba(17, 17, 17, 0.35);
  --c-white-hair: var(--border-color);

  /* Surfaces */
  --bg-0: var(--bg-primary);
  --bg-1: var(--bg-secondary);
  --bg-2: var(--bg-alt);
  --glass: rgba(0, 0, 0, 0.02);
  --glass-strong: rgba(0, 0, 0, 0.04);
  --cursor-glow: rgba(17, 17, 17, 0.05);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  --fs-hero: clamp(3.2rem, 9vw, 9.5rem);
  --fs-h1: clamp(2.4rem, 5.4vw, 5.2rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3.4rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.8rem);
  --fs-lead: clamp(1.1rem, 1.6vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.82rem;
  --fs-micro: 0.72rem;

  /* ---- Spacing scale (8pt-ish, luxury-generous) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.6rem;
  --sp-4: 2.4rem;
  --sp-5: 4rem;
  --sp-6: 6.4rem;
  --sp-7: 9.6rem;
  --sp-8: 14rem;

  --section-pad: clamp(5rem, 10vw, 9.6rem);
  --container-w: 1360px;
  --gutter: clamp(1.4rem, 5vw, 4rem);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.28s;
  --dur-mid: 0.6s;
  --dur-slow: 1.1s;

  /* ---- Structure ---- */
  --radius-s: 2px;
  --radius-m: 6px;
  --radius-l: 18px;
  --border-hair: 1px solid var(--c-white-hair);
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(17, 17, 17, 0.06);
  --shadow-card-hover: 0 4px 8px rgba(17, 17, 17, 0.05), 0 16px 36px rgba(17, 17, 17, 0.09);
  --svc-card-border: #ececec;
  --svc-card-radius: 24px;
  --svc-card-shadow: 0 10px 30px rgba(0, 0, 0, .04);
  --svc-card-shadow-hover: 0 20px 45px rgba(0, 0, 0, .08);
  --shadow-nav: 0 1px 16px rgba(17, 17, 17, 0.06);
  --z-nav: 500;
  --z-cursor: 900;
  --z-loader: 1000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001s;
    --dur-mid: 0.001s;
    --dur-slow: 0.001s;
  }
}