/* =====================================================
   DESIGN TOKENS — source de vérité canonique
   ===================================================== */

:root {
  /* ── Neutral ── */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F5F5F5;
  --color-neutral-200:  #E5E5E5;
  --color-neutral-300:  #D4D4D4;
  --color-neutral-400:  #A3A3A3;
  --color-neutral-500:  #727272;
  --color-neutral-600:  #515151;
  --color-neutral-700:  #252525;
  --color-neutral-800:  #1C1C1E;
  --color-neutral-900:  #0C0C0C;
  --color-neutral-1000: #000000;

  /* ── Purple ── */
  --color-purple-100: #EDE9FE;
  --color-purple-200: #BEB4FF;
  --color-purple-300: #A87CFF;
  --color-purple-400: #947AFC;
  --color-purple-500: #925BFF;
  --color-purple-600: #7C3AED;
  --color-purple-700: #6D28D9;

  /* ── Blue ── */
  --color-blue-100: #BAE0FF;
  --color-blue-200: #7EC8FF;
  --color-blue-300: #45B0FF;
  --color-blue-400: #1A9EFF;
  --color-blue-500: #008CFF;
  --color-blue-600: #0070CC;
  --color-blue-700: #005499;

  /* ── Green ── */
  --color-green-100: #DCFCE7;
  --color-green-500: #22C55E;
  --color-green-600: #16A34A;

  /* ── Red ── */
  --color-red-100: #FEE2E2;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;

  /* ── Yellow ── */
  --color-yellow-100: #FEF9C3;
  --color-yellow-400: #F2CB45;
  --color-yellow-500: #EAB308;

  /* ── Accent ── */
  --color-orange-500: #FF630F;
  --color-pink-400:   #FF5FB0;

  /* ── Brand Shortcuts ── */
  --color-purple: var(--color-purple-400);
  --color-blue:   var(--color-blue-500);
  --color-orange: var(--color-orange-500);
  --color-yellow: var(--color-yellow-400);
  --color-pink:   var(--color-pink-400);

  /* ── Alpha (white/black overlays) ── */
  --alpha-white-8:   rgba(255, 255, 255, 0.08);
  --alpha-white-12:  rgba(255, 255, 255, 0.12);
  --alpha-white-14:  rgba(255, 255, 255, 0.14);
  --alpha-white-24:  rgba(255, 255, 255, 0.24);
  --alpha-black-24:  rgba(0, 0, 0, 0.24);

  /* ── Alias de compatibilité ── */
  --color-white:      var(--color-neutral-0);
  --color-green-400:  #4ADE80;
  --color-red-400:    #F87171;

  /* ── Spacing (4px grid — matches suite) ── */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-30: 120px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* ── Named spacing (marketing-specific) ── */
  --space-page-x:       var(--space-6);   /* 24px */
  --space-section-y:    var(--space-16);  /* 64px */
  --space-section-y-sm: var(--space-12);  /* 48px */
  --space-card-gap:     var(--space-4);   /* 16px */

  /* ── Hero (marketing pages — homepage excluded) ── */
  --hero-min-height:         min(100vh, 900px);
  --hero-min-height-compact: 52vh;
  --hero-pb-split:           var(--space-20);
  --hero-pb-centered:        var(--space-30);
  --hero-illustration-size:  clamp(360px, 38vw, 480px);
  --hero-content-max:        860px;
  --hero-subtitle-max:       640px;
  --hero-split-content-max:  592px;
  --hero-title-size-centered: var(--font-size-80);
  --hero-title-size-split:    clamp(var(--font-size-40), 3.6vw, var(--font-size-56));
  --hero-title-size-compact:  var(--font-size-64);

  /* ── CTA closing cards (.cta-bento / .cta-card) ── */
  --cta-closing-max-w:    1200px;
  --cta-closing-aspect:   12 / 5;
  --cta-closing-min-h:    clamp(400px, 42vw, 500px);
  --cta-closing-pad-y:    var(--space-20);
  --cta-closing-pad-x:    var(--space-12);

  /* ── Border Radius ── */
  --radius-0:    0px;
  --radius-1:    8px;
  --radius-2:    16px;
  --radius-3:    24px;
  --radius-4:    32px;
  --radius-5:    40px;
  --radius-6:    48px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 32px -8px rgba(0, 0, 0, 0.15);

  /* ── Typography ── */
  --font-sans: 'Suisse Intl', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', monospace;

  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-56: 56px;
  --font-size-60: 60px;
  --font-size-64: 64px;
  --font-size-80: 80px;

  --font-weight-regular:  400;
  --font-weight-book:     450;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  --line-height-none:    1;
  --line-height-tight:   1.2;
  --line-height-snug:    1.3;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.5;
  --line-height-loose:   1.6;

  /* Semantic body — 3-tier scale (sm / md / lg) + shared lh/color */
  --text-body-sm:    var(--font-size-16);
  --text-body-md:    var(--font-size-18);
  --text-body-lg:    var(--font-size-20);
  --text-body-size:  var(--text-body-md); /* default tier */
  --text-body-color: var(--text-secondary);
  --text-body-lh:    var(--line-height-relaxed);

  --letter-spacing-tighter: -0.04em;
  --letter-spacing-tight:   -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.02em;
  --letter-spacing-wider:   0.08em;
  --letter-spacing-widest:  0.16em;
  --letter-spacing-hero:    0.3rem;

  /* ── Animation ── */
  --duration-0:   0ms;
  --duration-80:  80ms;
  --duration-160: 160ms;
  --duration-240: 240ms;
  --duration-320: 320ms;
  --duration-480: 480ms;

  --ease-linear: linear;
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Label indicator colors (SectionLabel pill) ── */
  --label-purple:  var(--color-purple-400);
  --label-blue:    var(--color-blue-400);
  --label-green:   var(--color-green-500);
  --label-red:     var(--color-red-500);
  --label-yellow:  var(--color-yellow-400);
  --label-orange:  var(--color-orange-500);
  --label-pink:    var(--color-pink-400);
  --label-neutral: var(--color-neutral-400);

  /* ── Status badges ── */
  --badge-green:     var(--color-green-500);    /* #22C55E */
  --badge-green-bg:  rgba(34, 197, 94, 0.2);
  --badge-orange:    #F97316;                   /* intentionnel : status orange ≠ brand orange (#FF630F) */
  --badge-orange-bg: rgba(249, 115, 22, 0.2);
  --badge-yellow:    #F59E0B;                   /* intentionnel : status yellow ≠ brand yellow (#F2CB45) */
  --badge-yellow-bg: rgba(245, 158, 11, 0.2);
  --badge-red:       var(--color-red-500);      /* #EF4444 */
  --badge-red-bg:    rgba(239, 68, 68, 0.2);
  --badge-pink:      #EC4899;
  --badge-pink-bg:   rgba(236, 72, 153, 0.2);

  /* ── Semantic: Text ── */
  --text-primary:  var(--color-neutral-0);
  --text-secondary: var(--color-neutral-400);
  --text-tertiary: var(--color-neutral-500);
  --text-disabled: var(--color-neutral-400);
  --text-inverse:  var(--color-neutral-1000);
  --text-link:     var(--color-neutral-300);
  --text-brand:    var(--color-purple-400);
  --text-success:  var(--color-green-600);
  --text-warning:  var(--color-yellow-500);
  --text-error:    var(--color-red-600);

  /* ── Semantic: Background ── */
  --bg-primary:    var(--color-neutral-1000);
  --bg-secondary:  var(--color-neutral-900);
  --bg-tertiary:   var(--color-neutral-800);
  --bg-inverse:    var(--color-neutral-0);
  --bg-elevated:   var(--color-neutral-700);
  --bg-sunken:     var(--color-neutral-900);
  --bg-glass:      rgba(12, 12, 12, 0.55);
  --bg-glass-light: rgba(255, 255, 255, 0.08);
  --bg-brand:      var(--color-purple-400);

  /* ── Semantic: Border ── */
  --border-primary:          var(--color-neutral-700);
  --border-secondary:        var(--color-neutral-600);
  --border-tertiary:         var(--color-neutral-800);
  --border-card:             var(--alpha-white-8);
  --border-subtle:           #333333;
  --border-transparent:      var(--alpha-white-12);
  --border-transparent-subtle: var(--alpha-white-8);
  --border-active:           var(--alpha-white-24);
  --border-focus:            var(--color-blue-400);
  --border-brand:            var(--color-purple-400);

  /* ── Icon filters (black SVG → target via CSS filter on <img>) ── */
  --filter-icon-white: brightness(0) invert(1);
  /* Maps black SVG icons to --color-purple-400 (#947AFC) */
  --filter-icon-brand: brightness(0) saturate(100%) invert(67%) sepia(78%) saturate(4379%) hue-rotate(219deg) brightness(97%) contrast(105%);

  /* ── Layout ── */
  --max-w-container: 1200px;
  --max-w-lead: 820px;

  /* ── Gradients ── */
  --gradient-bento-scrim: linear-gradient(
    160deg,
    rgba(10, 10, 14, 0.75) 0%,
    rgba(10, 10, 14, 0.45) 55%,
    rgba(10, 10, 14, 0.15) 100%
  );
}

/* =====================================================
   LIGHT MODE — Override semantic tokens for light backgrounds
   Opt-in via body.light-mode (full page) or .light-mode on any
   section/subtree (CSS custom properties cascade to children).
   ===================================================== */

body.light-mode,
.light-mode {
  --text-primary:  var(--color-neutral-1000);
  /* Supporting copy on light bands — denser than homepage 500 */
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-500);
  --text-disabled: var(--color-neutral-400);
  --text-inverse:  var(--color-neutral-0);
  --text-link:     var(--color-neutral-600);

  --bg-primary:    var(--color-neutral-0);
  --bg-secondary:  var(--color-neutral-50);
  --bg-tertiary:   var(--color-neutral-100);
  --bg-inverse:    var(--color-neutral-1000);
  --bg-elevated:   var(--color-neutral-50);
  --bg-sunken:     var(--color-neutral-100);
  --bg-glass:      rgba(255, 255, 255, 0.85);
  --bg-glass-light: rgba(0, 0, 0, 0.05);

  --border-primary:          var(--color-neutral-200);
  --border-secondary:        var(--color-neutral-300);
  --border-tertiary:         var(--color-neutral-100);
  /* Stronger than dark-mode alpha so light-band cell dividers read clearly */
  --border-card:             var(--color-neutral-200);
  --border-active:           var(--alpha-black-24);
  --border-transparent:      rgba(0, 0, 0, 0.12);
  --border-transparent-subtle: rgba(0, 0, 0, 0.08);
}