/* ==========================================================================
   ELEDJI — Design Tokens
   Source de vérité pour couleurs, espacements, typographie, radius, ombres,
   transitions et breakpoints. Ne pas dupliquer ces valeurs ailleurs.
   ========================================================================== */

:root {
  /* ---------- Couleurs de marque ---------- */
  --color-obsidian: #0b0b0d;       /* fond sombre principal */
  --color-obsidian-soft: #141417;  /* surface sombre secondaire (cartes, header) */
  --color-graphite: #242428;       /* bordures / séparateurs sur fond sombre */
  --color-ivory: #f5f1ea;          /* fond clair principal (sections éditoriales) */
  --color-off-white: #fcfaf7;      /* surface claire secondaire (cartes) */
  --color-champagne: #c89038;      /* accent premium / CTA — échantillonné sur le vrai logo */
  --color-champagne-dark: #a87028; /* accent au survol — échantillonné sur le vrai logo */
  --color-champagne-soft: #e0a848; /* accent atténué (texte sur fond sombre) — échantillonné sur le vrai logo */
  --color-terracotta: #a85c48;     /* accent secondaire / tags */
  --color-mist: #a7a3a0;           /* texte atténué sur fond sombre */
  --color-ink: #1a1a1c;            /* texte principal sur fond clair */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ---------- Rôles sémantiques ---------- */
  --surface-primary-dark: var(--color-obsidian);
  --surface-secondary-dark: var(--color-obsidian-soft);
  --surface-primary-light: var(--color-ivory);
  --surface-secondary-light: var(--color-off-white);

  --text-on-dark-primary: var(--color-ivory);
  --text-on-dark-secondary: var(--color-mist);
  --text-on-light-primary: var(--color-ink);
  --text-on-light-secondary: #6b6763;

  --border-on-dark: rgba(245, 241, 234, 0.12);
  --border-on-dark-strong: rgba(245, 241, 234, 0.24);
  --border-on-light: rgba(26, 26, 28, 0.1);
  --border-on-light-strong: rgba(26, 26, 28, 0.18);

  --accent: var(--color-champagne);
  --accent-strong: var(--color-champagne-dark);

  /* ---------- Overlays & profondeur ---------- */
  --overlay-hero: linear-gradient(
    180deg,
    rgba(11, 11, 13, 0.05) 0%,
    rgba(11, 11, 13, 0.15) 45%,
    rgba(11, 11, 13, 0.92) 100%
  );
  --overlay-card: linear-gradient(
    180deg,
    rgba(11, 11, 13, 0) 55%,
    rgba(11, 11, 13, 0.78) 100%
  );
  --glass-bg-dark: rgba(20, 20, 23, 0.55);
  --glass-bg-light: rgba(252, 250, 247, 0.65);
  --glass-border: rgba(245, 241, 234, 0.14);
  --glass-blur: 18px;

  /* ---------- Typographie ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.5rem, 2rem + 3.2vw, 4.75rem);
  --fs-h1: clamp(2rem, 1.7rem + 1.8vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 1.1vw, 2.25rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-body-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-eyebrow: 0.16em;

  /* ---------- Espacements (base 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Ombres ---------- */
  --shadow-sm: 0 1px 2px rgba(11, 11, 13, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 11, 13, 0.16);
  --shadow-lg: 0 24px 64px rgba(11, 11, 13, 0.28);
  --shadow-glow: 0 0 0 1px rgba(200, 169, 107, 0.3), 0 8px 32px rgba(200, 169, 107, 0.18);

  /* ---------- Transitions ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --container-padding: clamp(20px, 5vw, 64px);
  --nav-height: 76px;
  --nav-height-mobile: 64px;
  --mobile-tabbar-height: 72px;

  /* ---------- Z-index ---------- */
  --z-nav: 100;
  --z-mobile-tabbar: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-intro: 500;
}