/* ============================================================================
 * KARELYS — Design tokens
 * Identité haut de gamme : Or & Noir + Galerie
 * ============================================================================ */

:root {
  /* ── Palette signature ───────────────────────────────────────────────── */
  --noir:           #0a0a0a;       /* Noir profond */
  --noir-chaud:     #14110d;       /* Noir nuancé (sous-tons or) */
  --noir-doux:      #1c1915;
  --ivoire:         #f4ede1;       /* Ivoire principal */
  --ivoire-chaud:   #ebe1cc;       /* Ivoire sable */
  --ivoire-pur:     #faf6ed;
  --or:             #c9a55c;       /* Or chaud */
  --or-clair:       #e8c97d;
  --or-fonce:       #8c6f30;
  --gris-galerie:   #2a2823;
  --blanc-pur:      #ffffff;

  /* ── Couleurs par ambiance ───────────────────────────────────────────── */
  --c-or-noir:      var(--noir);
  --c-or-noir-2:    var(--or);
  --c-galerie:      var(--ivoire);
  --c-galerie-2:    var(--gris-galerie);

  /* ── Typographie ─────────────────────────────────────────────────────── */
  --ff-display: 'Fraunces', 'Cormorant Garamond', 'Editorial New', Georgia, serif;
  --ff-body: 'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --ff-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Echelle fluide via clamp() */
  --fs-xxs: clamp(0.68rem, 0.65rem + 0.15vw, 0.75rem);
  --fs-xs:  clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --fs-sm:  clamp(0.88rem, 0.83rem + 0.25vw, 0.95rem);
  --fs-md:  clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  --fs-lg:  clamp(1.18rem, 1.08rem + 0.5vw, 1.35rem);
  --fs-xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-3xl: clamp(2.8rem, 2.2rem + 3vw, 4.5rem);
  --fs-4xl: clamp(4rem, 3rem + 5vw, 7.5rem);
  --fs-5xl: clamp(5.5rem, 4rem + 8vw, 12rem);

  /* ── Espacement ──────────────────────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6rem;
  --sp-10: 9rem;
  --sp-11: 12rem;

  /* ── Container ───────────────────────────────────────────────────────── */
  --max-w: 1600px;
  --gutter: clamp(1.25rem, 3vw, 3rem);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;
  --dur-xslow: 1400ms;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --header-h: 78px;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ── Lisibilité ──────────────────────────────────────────────────────── */
  --line-tight: 0.95;
  --line-normal: 1.5;
  --line-loose: 1.7;
}

/* Mode sombre (par défaut on est en mode clair "ivoire") */
[data-theme="dark"] {
  --bg: var(--noir);
  --bg-soft: var(--noir-chaud);
  --fg: var(--ivoire);
  --fg-soft: rgba(244, 237, 225, 0.65);
  --accent: var(--or);
  --rule: rgba(244, 237, 225, 0.12);
}

[data-theme="light"], :root {
  --bg: var(--ivoire);
  --bg-soft: var(--ivoire-chaud);
  --fg: var(--noir);
  --fg-soft: rgba(10, 10, 10, 0.6);
  --accent: var(--or-fonce);
  --rule: rgba(10, 10, 10, 0.1);
}