/*
 * ════════════════════════════════════════════════════════════
 *  Design Tokens — ART AU FÉMININ
 *  "The Quiet Curator" design system
 *
 *  Source de vérité : couleurs (nommage shadcn), --gradient-*, --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.
 * ════════════════════════════════════════════════════════════
 */

/* ── Couleurs — nommage shadcn/ui ──────────────────────────
 * Un rôle = un token. Le même nom sert en clair et en sombre :
 * un conteneur .dark (galerie 3D, visionneuse, bandeaux, sidebar
 * admin) redéfinit les valeurs, les composants ne changent pas.
 * .light rétablit le thème clair dans une zone sombre.
 *
 * Paires : X = fond, X-foreground = texte posé dessus. Sans paire
 * (secondary, muted, card), le texte est --foreground.
 * Teinte légère d'un rôle : color-mix(in srgb, var(--X) 10%, transparent).
 * ─────────────────────────────────────────────────────── */
:root,
.light {
  --background:         #faf8f5;   /* fond de page                       */
  --foreground:         #1a1410;   /* texte principal (16:1)             */
  --card:               #ffffff;   /* carte posée sur un fond (admin)    */
  --primary:            #2a2420;   /* CTA, bandeaux sombres              */
  --primary-foreground: #f5f0ea;   /* texte sur primary                  */
  --secondary:          #f0ebe4;   /* bouton secondaire, survols, bandes */
  --muted:              #f5f0ea;   /* sections, zones discrètes          */
  --muted-foreground:   #5e5450;   /* texte secondaire (6.9:1)           */
  --accent:             #7a5c38;   /* cuivre : kickers, liens (5.8:1)    */
  --accent-foreground:  #faf8f5;   /* texte sur accent                   */
  --destructive:        #9b3a3a;   /* erreur, vendu, suppression         */
  --success:            #3d6b4a;   /* en cours, disponible, envoyé       */
  --warning:            #8a5a1c;   /* nouveau, à traiter                 */
  --info:               #3d5a74;   /* confirmé                           */
  --border:  color-mix(in srgb, var(--foreground) 10%, transparent);   /* filets, séparateurs        */
  --input:   color-mix(in srgb, var(--foreground) 20%, transparent);   /* contours de champ, bouton outline */
  --ring:    var(--primary);                                           /* anneau de focus            */
  --overlay: color-mix(in srgb, var(--foreground) 60%, transparent);   /* voile derrière un dialogue */

  /* Ombres ambiantes, teintées par l'encre — jamais de noir pur */
  --shadow-sm: 0 8px 24px color-mix(in srgb, var(--foreground) 5%, transparent);
  --shadow-md: 0 8px 40px color-mix(in srgb, var(--foreground) 8%, transparent);
  --shadow-lg: 0 12px 40px color-mix(in srgb, var(--foreground) 10%, transparent);
}

/* Anneau de focus : redéclaré par thème pour suivre --ring */
:root, .light, .dark { --focus-ring: 2px solid var(--ring); }

.dark {
  --background:         #120e0b;   /* noir chaud de la scène 3D          */
  --foreground:         #f5f0ea;   /* texte principal (17:1)             */
  --card:      color-mix(in srgb, var(--background) 80%, transparent);   /* panneau flottant (verre) */
  --primary:            #f5f0ea;
  --primary-foreground: #2a2420;
  --secondary: color-mix(in srgb, var(--foreground) 20%, transparent);
  --muted:     color-mix(in srgb, var(--foreground) 8%, transparent);
  --muted-foreground: color-mix(in srgb, var(--foreground) 62%, transparent);   /* 7:1 */
  --accent:             #c4a87a;   /* cuivre clair (8.4:1)               */
  --accent-foreground:  #120e0b;
  --destructive:        #e8a0a0;
  --success:            #a0e8b0;
  --border:  color-mix(in srgb, var(--foreground) 12%, transparent);
  --input:   color-mix(in srgb, var(--foreground) 24%, transparent);
  --ring:    var(--foreground);
  --overlay: color-mix(in srgb, var(--background) 72%, transparent);

  --shadow-sm: 0 12px 32px color-mix(in srgb, var(--background) 40%, transparent);
  --shadow-md: 0 32px 80px color-mix(in srgb, var(--background) 45%, transparent),
               0 8px 32px color-mix(in srgb, var(--background) 25%, transparent);
  --shadow-lg: 0 24px 80px color-mix(in srgb, var(--background) 80%, transparent);
}

:root {
  /* ── Verre sombre (galerie 3D) — fond : --card dans .dark ─*/
  --glass-blur:   blur(28px) saturate(1.4);
  --glass-radius: 28px;

  /* ── Gradients ────────────────────────────────────────────
   * primary     : bois poli — espresso → brun chaud, reflet en haut à gauche
   * placeholder : papier sous l'éclairage de la galerie, visuel manquant
   * overlay     : voile de lisibilité pour texte sur photo, fondu à pente
   *               douce (13 paliers) pour éviter la « marche » d'un linéaire
   * ─────────────────────────────────────────────────────── */
  --gradient-primary:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--primary-foreground) 10%, transparent), transparent 55%),
    linear-gradient(135deg, var(--primary) 0%, var(--muted-foreground) 100%);   /* bois poli : CTA, bandeaux sombres */
  --gradient-placeholder:
    radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--card) 45%, transparent), transparent 70%),
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 60%),
    linear-gradient(165deg, var(--muted), var(--secondary));   /* papier éclairé : visuel manquant */
  --gradient-overlay: linear-gradient(to top,
    color-mix(in srgb, var(--primary) 88%, transparent) 0%,
    color-mix(in srgb, var(--primary) 86%, transparent) 8%,
    color-mix(in srgb, var(--primary) 81%, transparent) 17%,
    color-mix(in srgb, var(--primary) 73%, transparent) 25%,
    color-mix(in srgb, var(--primary) 64%, transparent) 34%,
    color-mix(in srgb, var(--primary) 54%, transparent) 42%,
    color-mix(in srgb, var(--primary) 44%, transparent) 51%,
    color-mix(in srgb, var(--primary) 34%, transparent) 60%,
    color-mix(in srgb, var(--primary) 24%, transparent) 68%,
    color-mix(in srgb, var(--primary) 15%, transparent) 77%,
    color-mix(in srgb, var(--primary) 8%, transparent) 85%,
    color-mix(in srgb, var(--primary) 3%, transparent) 93%,
    color-mix(in srgb, var(--primary) 0%, transparent) 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;

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

  --focus-offset: 3px;
}