/* =============================================================================
   Jetons de design - « Bold Typography »
   Thème : suit l'appareil par défaut (prefers-color-scheme). L'utilisateur peut forcer
   clair ou sombre : assets/js/theme.js pose data-theme="light|dark" sur <html>.
   Les couleurs utilisent light-dark() : une seule déclaration par jeton, pas de doublon.
   ============================================================================= */

:root {
  color-scheme: light dark;

  /* Couleurs ---------------------------------------------------------------- */
  --bg:          light-dark(#FAFAFA, #0A0A0A);
  --fg:          light-dark(#0A0A0A, #FAFAFA);
  --muted:       light-dark(#EFEFEF, #1A1A1A);   /* surface en relief */
  --muted-fg:    light-dark(#5C5C5C, #8A8A8A);   /* texte secondaire (AA : 5,8:1 clair / 5,0:1 sombre) */
  --card:        light-dark(#FFFFFF, #0F0F0F);
  --input:       light-dark(#F2F2F2, #1A1A1A);
  --border:      light-dark(#D4D4D4, #262626);
  --border-hover:light-dark(#A3A3A3, #404040);

  --accent:      #FF3D00;                        /* vermillon : fonds, filets, grands textes */
  --accent-text: light-dark(#C42E00, #FF3D00);   /* version AA pour le petit texte */
  --accent-fg:   #0A0A0A;                        /* texte posé sur un fond accent */
  --ring:        var(--accent);

  /* États (le texte les accompagne toujours : la couleur n'est jamais seule) */
  --ok:          light-dark(#0B7A3E, #3DDC84);
  --warn:        light-dark(#8A5A00, #FFB020);
  --danger:      light-dark(#B3261E, #FF6B6B);

  /* Typographie ------------------------------------------------------------- */
  --font-sans:    "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-brand: "MuseoModerno", "Inter Tight", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  2rem;
  --fs-4xl:  clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-5xl:  clamp(2.25rem, 6vw, 3.5rem);
  --fs-6xl:  clamp(2.75rem, 8vw, 4.5rem);
  --fs-7xl:  clamp(3rem, 10vw, 6rem);
  --fs-8xl:  clamp(3.5rem, 12vw, 8rem);

  --tracking-tighter: -0.06em;
  --tracking-tight:   -0.04em;
  --tracking-normal:  -0.01em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  /* Forme, mouvement, mise en page ----------------------------------------- */
  --radius: 0;                                   /* aucun arrondi : arêtes vives */
  --ease: cubic-bezier(0.25, 0, 0, 1);
  --t-fast: 150ms;
  --t-base: 200ms;
  --t-slow: 500ms;

  --container: 1200px;
  --gutter: clamp(24px, 5vw, 64px);
  --section-y: clamp(80px, 12vw, 160px);

  --grain-opacity: 0.03;
}

/* Le grain est plus discret en sombre (1,5 % selon le design system) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --grain-opacity: 0.015; }
}
:root[data-theme="dark"]  { color-scheme: dark;  --grain-opacity: 0.015; }
:root[data-theme="light"] { color-scheme: light; }