:root {
  /* =========================================================
     PRIMITIFS (palette + neutrals)
     ========================================================= */
  --c-ink: 31 42 55;
  /* #1f2a37 */
  --c-slate: 91 103 118;
  /* #5b6776 */
  --c-paper: 246 247 251;
  /* #f6f7fb */
  --c-white: 255 255 255;
  --c-black: 0 0 0;

  --c-hero-0: 11 15 18;
  /* #0b0f12 */
  --c-hero-1: 7 11 14;
  /* #070b0e */

  --c-accent: 24 198 214;
  /* #18c6d6 */
  --c-accent-strong: 14 165 183;
  /* #0ea5b7 */
  --c-accent-hover: 24 207 227;
  /* #18cfe3 */

  /* Helpers rgb() */
  --ink: rgb(var(--c-ink));
  --slate: rgb(var(--c-slate));
  --paper: rgb(var(--c-paper));
  --white: rgb(var(--c-white));
  --black: rgb(var(--c-black));
  --accent: rgb(var(--c-accent));
  --accent-strong: rgb(var(--c-accent-strong));
  --accent-hover: rgb(var(--c-accent-hover));

  /* =========================================================
     SEMANTIQUES (app)
     ========================================================= */
  --bg: #25292c;
  /* si tu l'utilises vraiment */
  --surface: var(--white);

  --text: var(--ink);
  --muted: var(--slate);
  --border: #d6dde7;

  /* Typo / sizing */
  --header-h: 72px;
  --measure: 68ch;
  --measure-narrow: 58ch;

  /* Spacing helpers (valeurs clamp répétées) */
  --space-responsive-sm: clamp(16px, 2vh, 24px);
  --space-responsive-md: clamp(24px, 3vh, 36px);
  --space-responsive-lg: clamp(40px, 6vh, 64px);
  --space-responsive-xl: clamp(48px, 6vh, 80px);

  /* Padding helpers (container/sections) */
  --padding-container-x: clamp(24px, 3vw, 48px);
  --padding-container-y: clamp(24px, 4vw, 48px);

  /* Sizes helpers */
  --size-icon-md: clamp(72px, 9vw, 96px);

  /* Opacités courantes */
  --opacity-overlay-light: 0.4;
  --opacity-overlay-medium: 0.6;
  --opacity-overlay-heavy: 0.85;

  /* Couleurs rgba courantes */
  --color-white-10: rgba(var(--c-white), 0.1);
  --color-white-12: rgba(var(--c-white), 0.12);
  --color-white-20: rgba(var(--c-white), 0.2);
  --color-white-75: rgba(var(--c-white), 0.75);
  --color-white-85: rgba(var(--c-white), 0.85);
  --color-white-90: rgba(var(--c-white), 0.9);

  --color-black-10: rgba(var(--c-black), 0.1);
  --color-black-15: rgba(var(--c-black), 0.15);
  --color-black-20: rgba(var(--c-black), 0.2);
  --color-black-30: rgba(var(--c-black), 0.3);
  --color-black-40: rgba(var(--c-black), 0.4);

  --color-accent-02: rgba(var(--c-accent), 0.02);
  --color-accent-06: rgba(var(--c-accent), 0.06);
  --color-accent-20: rgba(var(--c-accent), 0.2);
  --color-accent-60: rgba(var(--c-accent), 0.6);
  --color-accent-85: rgba(var(--c-accent), 0.85);

  --color-slate-03: rgba(var(--c-slate), 0.03);
  --color-slate-04: rgba(var(--c-slate), 0.04);
  --color-slate-15: rgba(var(--c-slate), 0.15);

  --color-ink-60: rgba(var(--c-ink), 0.6);
  --color-ink-65: rgba(var(--c-ink), 0.65);

  --color-hero-40: rgba(var(--c-hero-0), 0.4);
  --color-hero-50: rgba(var(--c-hero-0), 0.5);

  /* Breakpoints standardisés */
  --bp-mobile-xs: 480px;
  --bp-mobile: 560px;
  --bp-mobile-lg: 640px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-desktop-lg: 1440px;

  /* Rhythm */
  --section-pad-y: clamp(72px, 9vh, 128px);
  --section-pad-y-lg: clamp(96px, 12vh, 160px);

  --stack-1: clamp(16px, 1.5vh, 20px);
  --stack-2: clamp(24px, 2.8vh, 36px);
  --stack-3: clamp(36px, 4.2vh, 56px);

  --gap-1: clamp(16px, 2.5vw, 24px);
  --gap-2: clamp(24px, 3.5vw, 36px);
  --gap-3: clamp(32px, 5vw, 48px);

  --hero-min-h: 80vh;
  --hero-min-h-mobile: 72vh;

  /* =========================================================
     ELEVATION / BLUR / RADIUS (primitifs UI)
     ========================================================= */
  --radius-sm: 12px;
  --radius-lg: 24px;

  --blur-lg: blur(10px);
  --blur-md: blur(6px);

  --shadow-hero-tile:
    0 0 0 1px rgba(0, 0, 0, 0.28) inset,
    0 10px 30px rgba(0, 0, 0, 0.25);

  --shadow-header-scrolled: 0 12px 24px rgba(15, 23, 42, 0.08);

  /* Card shadows */
  --shadow-card-base: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-strong: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.10);

  /* Button shadows */
  --shadow-btn: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-btn-hover: 0 4px 12px rgba(0, 0, 0, 0.12);

  /* =========================================================
     ANIMATIONS & TRANSITIONS
     ========================================================= */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Animation delays for staggering */
  --stagger-1: 50ms;
  --stagger-2: 100ms;
  --stagger-3: 150ms;
  --stagger-4: 200ms;

  /* =========================================================
     HEADER STATES (tokens sémantiques)
     ========================================================= */
  /* Top / overlay */
  --header-top-bg: var(--hero-band-bg);
  --header-top-border: transparent;
  --header-top-blur: none;
  --header-top-shadow: none;

  /* Hero glass */
  --header-hero-bg: rgba(var(--c-hero-0), 0.55);
  --header-hero-border: rgba(var(--c-white), 0.06);
  --header-hero-blur: var(--blur-lg);
  --header-hero-shadow: none;

  /* Scrolled light glass */
  --header-scroll-bg: rgba(var(--c-paper), 0.95);
  --header-scroll-border: rgba(var(--c-ink), 0.12);
  --header-scroll-blur: var(--blur-md);
  --header-scroll-shadow: var(--shadow-header-scrolled);

  /* =========================================================
     NAV / LOGO (tokens sémantiques)
     ========================================================= */
  --logo-on-dark: rgb(230 242 247);
  /* #e6f2f7 */
  --logo-on-light: var(--ink);

  --nav-on-dark: rgba(230, 242, 247, 0.75);
  --nav-on-dark-hover: var(--accent-hover);
  --nav-on-dark-active: var(--white);

  --nav-on-light: rgba(var(--c-ink), 0.70);
  --nav-on-light-hover: var(--accent-strong);
  --nav-on-light-active: var(--ink);

  /* =========================================================
     HERO BAND
     ========================================================= */
  --hero-band-bg: linear-gradient(180deg, rgb(var(--c-hero-0)), rgb(var(--c-hero-1)));
  --hero-text: rgb(248 250 252);
  --hero-text-muted: rgba(248, 250, 252, 0.78);
  --hero-text-shadow: 0 2px 12px rgba(11, 15, 18, 0.55);
  --hero-pattern-mask: linear-gradient(to right,
      rgba(var(--c-black), 0) 0%,
      rgba(var(--c-black), 1) 45%);

  /* =========================================================
     BUTTONS
     ========================================================= */
  --btn-text: rgb(0 16 24);
  --btn-primary-text: rgb(3 20 24);
  --btn-ghost-border: rgba(var(--c-accent), 0.5);

  /* =========================================================
     CHIP (hero-tech) tokens
     ========================================================= */
  --chip-bg: rgba(var(--c-white), 0.04);
  --chip-border: rgba(var(--c-white), 0.10);
  --chip-hover-bg: rgba(var(--c-white), 0.06);
  --chip-hover-border: rgba(120, 200, 210, 0.60);
  --chip-hover-glow: rgba(120, 200, 210, 0.22);
  --chip-focus-ring: rgba(120, 200, 210, 0.22);
  --chip-shadow: var(--shadow-hero-tile);
  --chip-hover-shadow:
    0 0 0 1px rgba(120, 200, 210, 0.12) inset,
    0 14px 40px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(120, 200, 210, 0.22);
  --chip-focus-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  --chip-tooltip-text: rgba(var(--c-white), 0.88);
  --chip-tooltip-bg: rgba(var(--c-black), 0.72);
  --chip-tooltip-border: rgba(var(--c-white), 0.10);

  /* =========================================================
     CARDS
     ========================================================= */
  --card-surface-border: rgba(var(--c-ink), 0.10);
  --card-surface-border-soft: rgba(var(--c-ink), 0.08);
  --card-border-subtle: rgba(var(--c-ink), 0.12);
  --card-soft-bg: rgba(var(--c-paper), 0.75);
  --card-highlight-bg: rgba(var(--c-paper), 0.95);

  /* =========================================================
     FOOTER
     ========================================================= */
  --footer-bg: rgb(var(--c-hero-0));
  --footer-text: rgb(226 232 240);
}