/* ══════════════════════════════════════════════════
   LÉLINS HOMME — Design Tokens v1.0
   Source of truth for all brand-aligned CSS values
══════════════════════════════════════════════════ */

:root {

  /* ── COLOR PRIMITIVES ── */
  --color-dark-navy:   #0d1520;
  --color-navy:        #1a2540;
  --color-navy-mid:    #253560;
  --color-steel:       #4a80b0;
  --color-steel-mid:   #7aaed0;
  --color-steel-light: #a8cce4;
  --color-steel-pale:  #c8dff0;
  --color-cream:       #f5f2ed;
  --color-cream-deep:  #eae6de;
  --color-cream-dark:  #d8d2c8;

  /* ── SEMANTIC COLORS ── */
  --bg-primary:        var(--color-cream);
  --bg-dark:           var(--color-dark-navy);
  --bg-navy:           var(--color-navy);
  --bg-surface:        var(--color-cream-deep);

  --text-primary:      var(--color-navy);
  --text-on-dark:      var(--color-cream);
  --text-muted:        rgba(26, 37, 64, 0.45);
  --text-muted-dark:   rgba(245, 242, 237, 0.45);

  --accent:            var(--color-steel);
  --accent-light:      var(--color-steel-light);
  --accent-pale:       var(--color-steel-pale);

  --border-light:      rgba(26, 37, 64, 0.1);
  --border-dark:       rgba(245, 242, 237, 0.08);
  --border-accent:     rgba(74, 128, 176, 0.3);

  /* ── TYPOGRAPHY ── */
  --font-display:      'Cormorant Garamond', Georgia, serif;
  --font-body:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fw-thin:           200;
  --fw-light:          300;
  --fw-regular:        400;

  --fs-label:          0.62rem;
  --fs-body-sm:        0.78rem;
  --fs-body:           0.9rem;
  --fs-body-lg:        1rem;
  --fs-title-sm:       1.4rem;
  --fs-title:          2rem;
  --fs-title-lg:       3rem;
  --fs-display:        clamp(3rem, 8vw, 8rem);

  --ls-label:          0.45em;
  --ls-body:           0.01em;
  --ls-display:        -0.02em;

  --lh-tight:          1.1;
  --lh-heading:        1.2;
  --lh-body:           1.65;

  /* ── SPACING (8pt grid) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 120px;
  --space-11: 160px;

  /* ── BORDER RADIUS ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 100px;
  --radius-full: 50%;

  /* ── SHADOWS ── */
  --shadow-subtle:  0 2px 20px rgba(13, 21, 32, 0.08);
  --shadow-medium:  0 8px 40px rgba(13, 21, 32, 0.14);
  --shadow-strong:  0 20px 80px rgba(13, 21, 32, 0.25);
  --shadow-glow:    0 0 80px rgba(74, 128, 176, 0.2);
  --shadow-glow-lg: 0 0 120px rgba(74, 128, 176, 0.3);

  /* ── TRANSITIONS ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-xslow:  700ms;

  /* ── Z-INDEX ── */
  --z-base:      0;
  --z-above:     10;
  --z-float:     20;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-preloader: 8000;
  --z-cursor:    9999;

  /* ── LAYOUT ── */
  --container-max: 1440px;
  --gutter-mobile: 2rem;
  --gutter-tablet: 3rem;
  --gutter-desktop: 5rem;

  --nav-height-default: 90px;
  --nav-height-compact: 70px;
}