/**
 * Design tokens — source unique de vérité.
 * Surchargés au runtime par le Customizer (inc/Customizer/Css.php) puis par
 * le mode sombre (prefers-color-scheme / [data-theme]).
 */

:root {
  /* --- Familles de polices (test : Fraunces titres + Inter corps/UI) --- */
  --jdj-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  --jdj-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --jdj-font-serif: var(--jdj-font-display);
  --jdj-font-read: "Newsreader", Georgia, "Times New Roman", serif; /* corps d'article (lecture longue) */
  --jdj-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Pilotés par le Customizer (valeurs de repli ci-dessous) */
  --jdj-font-headings: var(--jdj-font-display);
  --jdj-font-body: var(--jdj-font-sans);
  --jdj-font-scale: 1;
  --jdj-space-scale: 1;

  /* --- Couleur de marque (charte graphique officielle) --- */
  --jdj-primary: #2B2F59;     /* Bleu marine Mont Fuji */
  --jdj-primary-rgb: 43, 47, 89;
  --jdj-primary-700: color-mix(in oklab, var(--jdj-primary) 82%, black);
  --jdj-primary-50: color-mix(in oklab, var(--jdj-primary) 8%, white);
  --jdj-accent: #C53428;      /* Rouge vif « Japon » */
  --jdj-accent-rgb: 197, 52, 40;
  --jdj-brick: #A12B20;       /* Rouge brique du cercle (soleil) */
  --jdj-gold: #DB8F2D;        /* Orange ambré « Journal du » */
  --jdj-gold-rgb: 219, 143, 45;
  --jdj-ink: #1A1A1A;

  /* --- Surfaces sémantiques (mode clair) --- */
  --jdj-bg: #FBFCFE;
  --jdj-surface: #FFFFFF;
  --jdj-surface-2: #F4F6FA;
  --jdj-border: #E6EAF1;
  --jdj-text: var(--jdj-ink);
  --jdj-text-muted: #5B6573;
  --jdj-text-faint: #8A93A2;
  --jdj-link: var(--jdj-primary);
  --jdj-focus: var(--jdj-accent);

  /* --- Échelle typographique fluide --- */
  --fs-xs: calc(0.8125rem * var(--jdj-font-scale));
  --fs-sm: calc(0.9375rem * var(--jdj-font-scale));
  --fs-base: calc(clamp(1rem, 0.97rem + 0.15vw, 1.0625rem) * var(--jdj-font-scale));
  --fs-lg: calc(clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem) * var(--jdj-font-scale));
  --fs-xl: calc(clamp(1.375rem, 1.2rem + 0.9vw, 1.625rem) * var(--jdj-font-scale));
  --fs-2xl: calc(clamp(1.75rem, 1.4rem + 1.7vw, 2.25rem) * var(--jdj-font-scale));
  --fs-3xl: calc(clamp(2.125rem, 1.6rem + 2.6vw, 3rem) * var(--jdj-font-scale));
  --fs-4xl: calc(clamp(2.5rem, 1.8rem + 3.5vw, 4rem) * var(--jdj-font-scale));

  /* --- Échelle d'espacement --- */
  --sp-1: calc(0.5rem * var(--jdj-space-scale));
  --sp-2: calc(0.75rem * var(--jdj-space-scale));
  --sp-3: calc(1rem * var(--jdj-space-scale));
  --sp-4: calc(1.5rem * var(--jdj-space-scale));
  --sp-5: calc(2.25rem * var(--jdj-space-scale));
  --sp-6: calc(3.25rem * var(--jdj-space-scale));
  --sp-7: calc(4.5rem * var(--jdj-space-scale));
  --sp-8: calc(6rem * var(--jdj-space-scale));

  /* --- Formes & profondeur --- */
  --jdj-radius: 14px;
  --jdj-radius-sm: max(6px, calc(var(--jdj-radius) - 6px));
  --jdj-radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.06), 0 1px 3px rgba(22, 24, 29, 0.04);
  --shadow-md: 0 4px 12px rgba(22, 24, 29, 0.08), 0 2px 4px rgba(22, 24, 29, 0.04);
  --shadow-lg: 0 12px 32px rgba(22, 24, 29, 0.12), 0 4px 8px rgba(22, 24, 29, 0.06);

  /* --- Mise en page --- */
  --jdj-container: 1200px;
  --jdj-gutter: clamp(1rem, 3vw, 2rem);
  --jdj-cols: 3;
  --jdj-header-h: 72px;

  /* --- Mouvement --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.24s;
}

/* Mode sombre automatique (respecté sauf override explicite). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jdj-bg: #0C0E13;
    --jdj-surface: #14171E;
    --jdj-surface-2: #1B1F28;
    --jdj-border: #262B36;
    --jdj-text: #EAEDF3;
    --jdj-text-muted: #A4ADBC;
    --jdj-text-faint: #6F7A8B;
    --jdj-link: #6FA0E6;
    --jdj-primary-50: color-mix(in oklab, var(--jdj-primary) 22%, #14171E);
  }
}

/* Override explicite par l'interrupteur (theme-toggle). */
[data-theme="dark"] {
  --jdj-bg: #0C0E13;
  --jdj-surface: #14171E;
  --jdj-surface-2: #1B1F28;
  --jdj-border: #262B36;
  --jdj-text: #EAEDF3;
  --jdj-text-muted: #A4ADBC;
  --jdj-text-faint: #6F7A8B;
  --jdj-link: #6FA0E6;
  --jdj-primary-50: color-mix(in oklab, var(--jdj-primary) 22%, #14171E);
}