/*
 * ════════════════════════════════════════════════════════════
 *  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.
 * ════════════════════════════════════════════════════════════
 */

/* ── Primitives — une teinte, un cran de clarté ────────────
 * Chaque valeur n'est écrite qu'ici. Jamais utilisées dans un
 * composant : seuls les rôles ci-dessous y renvoient.
 * Neutres chauds (teinte OKLCH ≈ 60°), du blanc au noir de la scène.
 * ─────────────────────────────────────────────────────── */
:root {
  --neutral-0:   #ffffff;
  --neutral-50:  #faf8f5;   /* papier            */
  --neutral-100: #f5f0ea;   /* crème             */
  --neutral-150: #f0ebe4;   /* lin               */
  --neutral-300: #b5aca5;   /* taupe clair       */
  --neutral-600: #5e5450;   /* taupe             */
  --neutral-800: #272320;
  --neutral-850: #1f1b18;
  --neutral-900: #1a1410;   /* encre             */
  --neutral-950: #120e0b;   /* noir chaud        */
  --copper-300:  #c4a87a;
  --copper-700:  #7a5c38;
  --red-200:     #e8a0a0;
  --red-700:     #9b3a3a;
  --green-200:   #a0e8b0;
  --green-700:   #3d6b4a;
  --amber-300:   #e4b37e;
  --amber-700:   #8a5a1c;
  --blue-300:    #a1c2e0;
  --blue-700:    #3d5a74;
}

/* ── Couleurs — nommage shadcn/ui ──────────────────────────
 * Un rôle = un token. Le même nom sert dans chaque thème, les
 * composants ne changent pas :
 *   clair       :root, .light (zone toujours claire : QR code)
 *   sombre      le système en mode sombre (prefers-color-scheme)
 *   verre .dark zone toujours sombre (galerie 3D, visionneuses,
 *               bandeaux) : surfaces translucides sur la scène
 *   .page-theme dans une zone .dark, revient au thème de la page
 *
 * Paires : X = fond, X-foreground = texte posé dessus. Sans paire
 * (secondary, muted, card), le texte est --foreground.
 * Fond plein --foreground (CTA) : texte en --background.
 * Teinte légère d'un rôle : --X-tint (badge, encadré, zone à son nom),
 * texte en --X par-dessus. Verre clair sur une image ou une page qui défile : --surface-glass.
 * Contraste mesuré du texte : ≥ 6:1 sur chaque surface, dans chaque thème.
 * ─────────────────────────────────────────────────────── */
:root,
.light,
.page-theme {
  color-scheme: light;
  --background:         var(--neutral-50);    /* fond de page                       */
  --foreground:         var(--neutral-900);   /* encre : texte, CTA (16:1)           */
  --card:               var(--neutral-0);     /* carte posée sur un fond (admin)    */
  --secondary:          var(--neutral-150);   /* bouton secondaire, survols, bandes */
  --muted:              var(--neutral-100);   /* sections, zones discrètes          */
  --muted-foreground:   var(--neutral-600);   /* texte secondaire (6.9:1)           */
  --accent:             var(--copper-700);    /* cuivre : kickers, liens (5.8:1)    */
  --accent-foreground:  var(--neutral-50);    /* texte sur accent                   */
  --destructive:        var(--red-700);       /* erreur, vendu, suppression         */
  --success:            var(--green-700);     /* en cours, disponible, envoyé       */
  --warning:            var(--amber-700);     /* nouveau, à traiter                 */
  --info:               var(--blue-700);      /* 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(--foreground);                                        /* 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);
}

/* Sombre : surfaces opaques qui s'éclaircissent en montant (fond → zone → carte → survol) */
@media (prefers-color-scheme: dark) {
  :root,
  .page-theme {
    color-scheme: dark;
    --background:         var(--neutral-950);   /* noir chaud de la scène 3D          */
    --foreground:         var(--neutral-100);   /* texte principal (17:1)             */
    --card:               var(--neutral-850);   /* carte posée sur un fond            */
    --secondary:          var(--neutral-800);   /* bouton secondaire, survols, bandes */
    --muted:              var(--neutral-900);   /* sections, zones discrètes          */
    --muted-foreground:   var(--neutral-300);   /* texte secondaire (7:1)             */
    --accent:             var(--copper-300);    /* cuivre clair (6.9:1 au pire)       */
    --accent-foreground:  var(--neutral-950);
    --destructive:        var(--red-200);
    --success:            var(--green-200);
    --warning:            var(--amber-300);
    --info:               var(--blue-300);
    --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);
  }
}

/* Verre : le thème sombre, ses surfaces laissant voir la scène */
.dark {
  color-scheme: dark;
  --background:         var(--neutral-950);
  --foreground:         var(--neutral-100);
  --card:      color-mix(in srgb, var(--background) 80%, transparent);   /* panneau flottant (verre) */
  --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:             var(--copper-300);
  --accent-foreground:  var(--neutral-950);
  --destructive:        var(--red-200);
  --success:            var(--green-200);
  --warning:            var(--amber-300);
  --info:               var(--blue-300);
  --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);
}

/* Dérivés des rôles, redéclarés par thème pour suivre leur rôle : anneau de focus,
 * teintes légères (10 %, texte du rôle ≥ 4.5:1 dessus) et verre clair */
:root, .light, .page-theme, .dark {
  --focus-ring: 2px solid var(--ring);

  --accent-tint:      color-mix(in srgb, var(--accent) 10%, transparent);
  --success-tint:     color-mix(in srgb, var(--success) 10%, transparent);
  --destructive-tint: color-mix(in srgb, var(--destructive) 10%, transparent);
  --warning-tint:     color-mix(in srgb, var(--warning) 10%, transparent);
  --info-tint:        color-mix(in srgb, var(--info) 10%, transparent);

  --surface-glass: color-mix(in srgb, var(--background) 92%, transparent);
}

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

  /* ── Gradients ────────────────────────────────────────────
   * foreground  : bois poli — encre → brun chaud, reflet en haut à gauche
   * placeholder : papier sous l'éclairage de la galerie, visuel manquant (suit le thème)
   * overlay     : voile de lisibilité pour texte sur photo, fondu à pente
   *               douce (13 paliers) pour éviter la « marche » d'un linéaire
   * foreground et overlay restent à l'encre dans chaque thème : le texte posé
   * dessus est toujours clair (zone .dark)
   * ─────────────────────────────────────────────────────── */
  --gradient-foreground:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--neutral-50) 10%, transparent), transparent 55%),
    linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-600) 100%);   /* bois poli : bandeaux sombres, dans chaque thème */
  --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(--foreground) 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(--neutral-900) 88%, transparent) 0%,
    color-mix(in srgb, var(--neutral-900) 86%, transparent) 8%,
    color-mix(in srgb, var(--neutral-900) 81%, transparent) 17%,
    color-mix(in srgb, var(--neutral-900) 73%, transparent) 25%,
    color-mix(in srgb, var(--neutral-900) 64%, transparent) 34%,
    color-mix(in srgb, var(--neutral-900) 54%, transparent) 42%,
    color-mix(in srgb, var(--neutral-900) 44%, transparent) 51%,
    color-mix(in srgb, var(--neutral-900) 34%, transparent) 60%,
    color-mix(in srgb, var(--neutral-900) 24%, transparent) 68%,
    color-mix(in srgb, var(--neutral-900) 15%, transparent) 77%,
    color-mix(in srgb, var(--neutral-900) 8%, transparent) 85%,
    color-mix(in srgb, var(--neutral-900) 3%, transparent) 93%,
    color-mix(in srgb, var(--neutral-900) 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             */
  --text-display: clamp(4.5rem, 3rem + 6vw, 8rem);      /* 72 → 128px — chiffre-héros du tableau de bord galerie */

  /* ── 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;
  /* Courbe « révélée par l'éclairage » : départ vif, arrivée lente (tableau de bord galerie) */
  --ease-curator: cubic-bezier(0.2, 0.7, 0.2, 1);

  --focus-offset: 3px;
}