/* ==========================================================================
   HORUS — Design tokens
   Source unique de vérité. Aucune couleur/valeur hex en dur ailleurs.
   ========================================================================== */

:root {
  /* ── Couleurs de base ─────────────────────────────────────────────── */
  --color-ink:         #0b0b0c;   /* noir encre — textes, fond dark */
  --color-paper:       #f6f1e8;   /* papyrus — fond principal light */
  --color-paper-pure:  #ffffff;   /* blanc pur — cartes produit */
  --color-bronze:      #b08b4a;   /* or ambré — accent Horus */
  --color-bronze-deep: #8a6a33;   /* or sombre — survol accent */
  --color-olive:       #3f4a2e;   /* olive profond — botanique */
  --color-olive-soft:  #6b7a57;   /* olive clair — secondaire */
  --color-sand:        #e8dcc7;   /* sable — séparations douces */
  --color-lapis:       #2a4c7a;   /* lapis-lazuli — accent égyptien (emblèmes, états info) */
  --color-oxide:       #a64033;   /* rouge oxydé — accent égyptien (promos, alerte chaude) */

  /* ── Sémantique ──────────────────────────────────────────────────── */
  --color-bg:          var(--color-paper);
  --color-bg-elevated: var(--color-paper-pure);
  --color-fg:          var(--color-ink);
  --color-muted:       #5a5652;
  --color-border:      #d7cdb8;
  --color-accent:      var(--color-bronze);
  --color-accent-fg:   var(--color-ink);

  /* ── États ───────────────────────────────────────────────────────── */
  --color-success:     #2f6a3c;
  --color-warning:     #a66b17;
  --color-danger:      #a12828;
  /* Lapis = info/new, Oxide = promo/urgent — cf docs/design-system.md
     "Orchestration accents égyptiens". Jamais les deux sur le même composant. */
  --color-info:        var(--color-lapis);
  --color-promo:       var(--color-oxide);
  --color-urgent:      var(--color-oxide);
  /* Focus ring secondaire (éléments info / liens éditoriaux). Primaire reste bronze. */
  --focus-ring-secondary: var(--color-lapis);

  /* ── Typographies ────────────────────────────────────────────────── */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   0.8125rem;     /* 13px */
  --fs-sm:   0.9375rem;     /* 15px */
  --fs-base: 1.0625rem;     /* 17px — confort lecture */
  --fs-md:   1.25rem;       /* 20px */
  --fs-lg:   1.75rem;       /* 28px */
  --fs-xl:   2.5rem;        /* 40px */
  --fs-2xl:  3.5rem;        /* 56px */
  --fs-3xl:  clamp(3.5rem, 5vw + 1rem, 6rem);  /* héros éditorial */

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ── Spacing — échelle 8px stricte ───────────────────────────────── */
  --s-1: 0.25rem;  /* 4px  */
  --s-2: 0.5rem;   /* 8px  */
  --s-3: 0.75rem;  /* 12px */
  --s-4: 1rem;     /* 16px */
  --s-5: 1.5rem;   /* 24px */
  --s-6: 2rem;     /* 32px */
  --s-7: 3rem;     /* 48px */
  --s-8: 4rem;     /* 64px */
  --s-9: 6rem;     /* 96px */
  --s-10: 8rem;    /* 128px */

  /* ── Grille / conteneurs ─────────────────────────────────────────── */
  --container:        1240px;
  --container-narrow: 780px;
  --gutter:           var(--s-5);

  /* ── Rayons ──────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* ── Ombres ──────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(11, 11, 12, .06);
  --shadow-md: 0 6px 24px rgba(11, 11, 12, .08);
  --shadow-lg: 0 24px 60px rgba(11, 11, 12, .12);

  /* ── Transitions ─────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(.2, .7, .3, 1);
  --ease-in:   cubic-bezier(.4, 0, 1, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  320ms;

  /* ── Z-index ─────────────────────────────────────────────────────── */
  --z-base:     0;
  --z-sticky:   50;
  --z-dropdown: 100;
  --z-modal:    500;
  --z-toast:    700;
  --z-agegate:  900;

  /* ── Gradients éditoriaux (Phase A — texture & profondeur) ───────── */
  /* Cool : lapis → ink — dominante hero home + fiches produit (max 50% overlay). */
  --gradient-hero-cool:    linear-gradient(135deg, var(--color-lapis) 0%, var(--color-ink) 100%);
  /* Warm : bronze → oxide — éditorial chaud (blog, promos, à-propos, éditos saisonniers). */
  --gradient-hero-warm:    linear-gradient(135deg, var(--color-bronze) 0%, var(--color-oxide) 100%);
  /* Soft : papyrus → sable — zones de respiration entre 2 blocs forts (delta 5-10%). */
  --gradient-surface-soft: linear-gradient(180deg, var(--color-paper) 0%, var(--color-sand) 100%);
  /* Gradient text — encre → bronze-deep, lisible WCAG sur fond papyrus. */
  --gradient-text-display: linear-gradient(180deg, var(--color-ink) 0%, var(--color-bronze-deep) 100%);
  /* Variante pour titres posés sur fond sombre (hero avec image + overlay cool). */
  --gradient-text-display-on-dark: linear-gradient(180deg, var(--color-paper) 0%, var(--color-bronze) 100%);
  /* Voile d'image hero — ombrage vertical qui garantit la lisibilité du titre. */
  --gradient-hero-veil:    linear-gradient(180deg, rgba(11, 11, 12, .15) 0%, rgba(11, 11, 12, .6) 100%);

  /* ── Ombres cinématiques (3 couches : contact + key + ambient) ──── */
  --shadow-cinematic:
    0 1px 2px rgba(11, 11, 12, .05),
    0 8px 24px rgba(11, 11, 12, .07),
    0 40px 80px -20px rgba(11, 11, 12, .1);

  /* ── Texture papier (SVG noise inline, appliqué à 3-5% d'opacité) ─ */
  --texture-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.04 0 0 0 0 0.05 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Dark mode auto — Phase H "warm dark" : shift bruni, bronze saturé, glow bronze */
@media (prefers-color-scheme: dark) {
  :root {
    /* Warm dark : au lieu du gris neutre (#0f0f10), un bruni subtil qui amène
       de la chaleur. Delta perceptible mais pas tape-à-l'œil. */
    --color-bg:          #1a1612;   /* était #0f0f10 (froid) → warm */
    --color-bg-elevated: #231e18;   /* était #1a1a1c → warm */
    --color-fg:          #efe7d5;
    --color-muted:       #a6a09b;
    --color-border:      #3a2f26;   /* était #2b2927 → warm */
    --color-sand:        #3a2f26;   /* idem */

    /* Bronze plus saturé en dark — plus doré, moins ocre, lisible sur bg warm.
       Impact en cascade : tous les gradients hero-warm, text-display, badges bronze,
       emblèmes, focus ring se réchauffent automatiquement. */
    --color-bronze:      #c89a55;   /* était #b08b4a (light) → saturé dark */
    --color-bronze-deep: #a67e42;   /* était #8a6a33 → plus chaud */

    /* Shadows dark = ombre noire + glow bronze subtil.
       Substitue aux ombres "dures" qui faisaient vide sur fond sombre. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35),
                 0 0 8px rgba(200, 154, 85, .04);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, .45),
                 0 0 24px rgba(200, 154, 85, .06);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55),
                 0 0 40px rgba(200, 154, 85, .07);

    /* Re-mapping des gradients/shadows en dark (Phase A + H) */
    --gradient-surface-soft: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-elevated) 100%);
    --gradient-text-display: linear-gradient(180deg, var(--color-fg) 0%, var(--color-bronze) 100%);
    --gradient-text-display-on-dark: linear-gradient(180deg, var(--color-paper) 0%, var(--color-bronze) 100%);
    --gradient-hero-veil:    linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .75) 100%);
    /* Cinematic shadow renforcée en dark : glow bronze 12% pour la profondeur. */
    --shadow-cinematic:
      0 1px 2px rgba(0, 0, 0, .5),
      0 8px 24px rgba(0, 0, 0, .6),
      0 0 80px -10px rgba(200, 154, 85, .12);
  }
}