/*
 * ════════════════════════════════════════════════════════════
 *  Design Tokens — ART au féminin
 *  "The Quiet Curator" design system
 *
 *  Source de vérité : --color-*, --font-*, --text-*, --tracking-*,
 *  --space-*, --radius-*, --shadow-*, --transition-*.
 *  Ne jamais utiliser de valeur codée en dur dans les CSS
 *  — toujours référencer une variable définie ici.
 * ════════════════════════════════════════════════════════════
 */

:root {

  /* ── Surfaces ─────────────────────────────────────────────
   * Couches de papier empilées : chaque conteneur imbriqué
   * est un cran plus foncé que son parent. Quatre crans.
   * ─────────────────────────────────────────────────────── */
  --color-surface:                #faf8f5;   /* fond de page, cartes          */
  --color-surface-container-low:  #f5f0ea;   /* sections, zones de démo       */
  --color-surface-container:      #f0ebe4;   /* bandes éditoriales, stats     */
  --color-surface-container-high: #e8e0d4;   /* sections marquées, survols    */

  /* ── Primary ──────────────────────────────────────────────
   * Espresso → bois chaud.
   * Gradient signature : 135° de primary → primary-container.
   * ─────────────────────────────────────────────────────── */
  --color-primary:           #51443b;   /* gradient from                    */
  --color-primary-container: #6a5b52;   /* gradient to                      */
  --color-primary-dark:      #2a2420;   /* CTA, surfaces sombres            */
  --color-on-primary:        #f5f0ea;   /* texte sur fond sombre            */

  /* ── Texte — trois niveaux, tous ≥ 4.5:1 sur les surfaces ─*/
  --color-on-surface:         #1a1410;  /* titres, texte principal          */
  --color-on-surface-variant: #5e5450;  /* corps de texte, descriptions     */
  --color-on-surface-muted:   #6e645e;  /* métadonnées, labels, notes       */
  --color-outline-variant:    #d1c4bd;  /* bordure fantôme (design.md)      */
  --color-white:              #ffffff;  /* texte sur photo ou fond sombre   */

  /* ── Accent — cuivre ──────────────────────────────────────*/
  --color-accent:            #c4a87a;   /* décoratif : puces, filets, fonds */
  --color-accent-text:       #7a5c38;   /* texte : kickers, liens (5.5:1)   */
  --color-accent-text-hover: #5a4228;   /* survol des liens accent          */

  /* ── Sémantique ───────────────────────────────────────────*/
  --color-status-live:  #5a9a6a;   /* point vert « en cours »               */
  --color-status-error: #c47a7a;   /* messages d'erreur                     */

  /* ── Galerie 3D — thème sombre ────────────────────────────*/
  --color-gold:                 #d4af37;   /* or de la galerie 3D          */
  --color-gold-pale:            #f0ddb8;   /* texte or sur fond noir       */
  --color-status-live-on-dark:  #a0e8b0;   /* « en cours » sur fond noir   */
  --color-status-error-on-dark: #e8a0a0;   /* erreur sur fond noir         */

  /* ── Composantes RGB pour les usages en transparence ──────*/
  --color-surface-rgb:      250, 248, 245;
  --color-primary-dark-rgb: 42, 36, 32;
  --color-accent-rgb:       196, 168, 122;
  --color-accent-text-rgb:  122, 92, 56;
  --color-gold-rgb:         212, 175, 55;
  --color-gold-pale-rgb:    240, 221, 184;

  /* ── Filets & placeholders ────────────────────────────────*/
  --color-hairline:          rgba(0, 0, 0, 0.06);    /* séparateurs 0.5px             */
  --color-placeholder-glyph: rgba(90, 70, 60, 0.18); /* initiale sur fond placeholder */

  /* ── Gradients ────────────────────────────────────────────
   * Construits sur les tokens de la palette, jamais de hex isolé.
   * primary     : bois poli — espresso → bois chaud, reflet en haut à gauche
   * placeholder : papier sous l'éclairage de la galerie, zone chaude en haut,
   *               ombre douce en bas à droite ; jamais de gris froid
   * dark-overlay: voile de lisibilité pour texte sur photo, fondu à pente douce
   *               (13 paliers) pour éviter la « marche » visible d'un dégradé linéaire
   * ─────────────────────────────────────────────────────── */
  --gradient-primary:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 45%, var(--color-primary-container) 100%);   /* bois poli : CTA, bandeaux sombres */
  --gradient-placeholder:
    radial-gradient(90% 70% at 30% 20%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(120% 90% at 100% 100%, rgba(var(--color-primary-dark-rgb), 0.06), transparent 60%),
    linear-gradient(165deg, var(--color-surface-container-low), var(--color-surface-container-high));   /* papier éclairé : visuel manquant */
  --gradient-dark-overlay: linear-gradient(to top,
    rgba(var(--color-primary-dark-rgb), 0.88) 0%,
    rgba(var(--color-primary-dark-rgb), 0.86) 8%,
    rgba(var(--color-primary-dark-rgb), 0.81) 17%,
    rgba(var(--color-primary-dark-rgb), 0.73) 25%,
    rgba(var(--color-primary-dark-rgb), 0.64) 34%,
    rgba(var(--color-primary-dark-rgb), 0.54) 42%,
    rgba(var(--color-primary-dark-rgb), 0.44) 51%,
    rgba(var(--color-primary-dark-rgb), 0.34) 60%,
    rgba(var(--color-primary-dark-rgb), 0.24) 68%,
    rgba(var(--color-primary-dark-rgb), 0.15) 77%,
    rgba(var(--color-primary-dark-rgb), 0.08) 85%,
    rgba(var(--color-primary-dark-rgb), 0.03) 93%,
    rgba(var(--color-primary-dark-rgb), 0) 100%);   /* voile de lisibilité : texte sur photo */

  /* ── Typography ───────────────────────────────────────────
   * Noto Serif  = voix éditoriale (titres, citations, corps)
   * Inter       = utilité (labels, boutons, navigation)
   * Mono        = code, ISBN, timestamps
   * ─────────────────────────────────────────────────────── */
  --font-serif: 'Noto Serif', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Échelle typographique ────────────────────────────────
   * Huit crans. Corps à 16px ; rien en dessous de 12px.
   * Les titres (2xl → 4xl) sont fluides entre 390 et 1440px.
   * ─────────────────────────────────────────────────────── */
  --text-xs:   0.75rem;    /* 12px — labels capitales, kickers, badges */
  --text-sm:   0.875rem;   /* 14px — métadonnées, boutons, légendes    */
  --text-base: 1rem;       /* 16px — corps de texte                    */
  --text-lg:   1.125rem;   /* 18px — texte lead, sous-titres           */
  --text-xl:   1.375rem;   /* 22px — titres de cartes                  */
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);   /* 28 → 36px — titres de section */
  --text-3xl:  clamp(2.25rem, 1.5rem + 3vw, 3.5rem);      /* 36 → 56px — titres de page    */
  --text-4xl:  clamp(2.75rem, 1.5rem + 5vw, 4.5rem);      /* 44 → 72px — héros             */

  /* ── Letter spacing ───────────────────────────────────────*/
  --tracking-tight:  -0.02em;   /* titres serif en grand corps     */
  --tracking-normal:  0em;      /* corps de texte                  */
  --tracking-wide:    0.08em;   /* boutons, navigation             */
  --tracking-wider:   0.18em;   /* labels capitales                */
  --tracking-widest:  0.28em;   /* kickers, étiquettes d'exposition */

  /* ── Espacement ───────────────────────────────────────────
   * Basé sur 0.25rem (4px). Utiliser des multiples.
   * ─────────────────────────────────────────────────────── */
  --space-1:  0.25rem;    /*  4px */
  --space-2:  0.5rem;     /*  8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-7:  1.75rem;    /* 28px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-28: 7rem;       /* 112px */

  /* ── Layout ───────────────────────────────────────────────*/
  --site-nav-height: 4.375rem;   /* 70px — en-tête fixe, décalage de <main> */

  /* ── Border radius ────────────────────────────────────────
   * sm = inputs, badges discrets
   * md = cartes (spécification design.md)
   * lg = boutons CTA (spécification design.md)
   * pill = badges ronds, tags status
   * ─────────────────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-pill: 999px;

  /* ── Concentric border radius (interfaces.dev) ────────────
   * Rayon interne = rayon externe − padding du conteneur.
   * Utiliser --radius-inner-* pour les enfants imbriqués.
   * Ex : conteneur radius-md (8px) + padding 8px → inner 0px
   *      conteneur radius-lg (12px) + padding 8px → inner 4px
   * ─────────────────────────────────────────────────────── */
  --radius-inner-sm:  calc(var(--radius-sm)  - var(--space-2));
  --radius-inner-md:  calc(var(--radius-md)  - var(--space-2));
  --radius-inner-lg:  calc(var(--radius-lg)  - var(--space-2));

  /* ── Stagger delays (animations échelonnées) ──────────────*/
  --stagger-1: 0ms;
  --stagger-2: 60ms;
  --stagger-3: 120ms;
  --stagger-4: 180ms;
  --stagger-5: 240ms;

  /* ── Ombres ───────────────────────────────────────────────
   * Règle design.md : ombres ambiantes uniquement.
   * Jamais de noir pur. Utiliser on-surface à 4-10% opacité.
   * Y: 8px, Blur: 24px, Spread: 0px (spec design.md).
   * ─────────────────────────────────────────────────────── */
  --shadow-ambient: 0 8px 24px rgba(29, 27, 26, 0.05);
  --shadow-card:    0 8px 40px rgba(29, 27, 26, 0.08);
  --shadow-lift:    0 12px 40px rgba(29, 27, 26, 0.10);

  /* ── Transitions ──────────────────────────────────────────*/
  --transition-fast:   0.18s ease;
  --transition-base:   0.25s ease;
  --transition-medium: 0.35s ease;

  /* ── Focus ────────────────────────────────────────────────
   * Anneau de focus accessible, cohérent sur tout le site.
   * ─────────────────────────────────────────────────────── */
  --focus-ring:   2px solid var(--color-primary-dark);
  --focus-offset: 3px;
}