/* =========================================================================
   OCDM · Design tokens
   Tokens partagés des deux thèmes (Papier / Vivant).
   Toutes les valeurs sémantiques (--ocdm-color-*, --ocdm-bg-*, etc.)
   sont définies ici. Les composants ne consomment QUE des tokens.
   ========================================================================= */

:root {
  /* ────────────────────────────────────────────────────────────────
     Palette brute (immutable, partagée entre les deux thèmes)
     ──────────────────────────────────────────────────────────────── */

  /* Encre & papier */
  --ocdm-ink-900:        #1f1a10;
  --ocdm-ink-700:        #2a2218;
  --ocdm-ink-500:        #4a4232;
  --ocdm-ink-400:        #6b6354;
  --ocdm-ink-300:        #8a7d68;
  --ocdm-ink-200:        #cdc3ad;
  --ocdm-ink-100:        #e6dfcd;
  --ocdm-ink-050:        #f1ebd9;

  --ocdm-paper-cream:    #faf5e9;
  --ocdm-paper-white:    #fffdf6;
  --ocdm-paper-snow:     #fafaf7;
  --ocdm-paper-pure:     #ffffff;

  /* Accents harmonisés — même chroma/lightness, hues différents */
  --ocdm-ocre:           #a85a2a;
  --ocdm-ocre-dark:      #8e4a22;
  --ocdm-ocre-light:     #d68a5a;
  --ocdm-ocre-soft:      rgba(168, 90, 42, 0.08);
  --ocdm-ocre-softer:    rgba(168, 90, 42, 0.16);

  --ocdm-sauge:          #6d8a52;
  --ocdm-sauge-dark:     #56703f;
  --ocdm-sauge-light:    #a5bd8a;
  --ocdm-sauge-soft:     rgba(109, 138, 82, 0.10);

  --ocdm-brique:         #b04428;
  --ocdm-brique-dark:    #8e3520;
  --ocdm-brique-light:   #d97a60;
  --ocdm-brique-soft:    rgba(176, 68, 40, 0.10);

  --ocdm-petrole:        #2c7287;
  --ocdm-petrole-dark:   #1f5566;
  --ocdm-petrole-light:  #6da6b8;
  --ocdm-petrole-soft:   rgba(44, 114, 135, 0.10);

  /* Famille "framboise / fuchsia" — chaleureux, clin d'œil ancien site */
  --ocdm-framboise:      #c9357a;
  --ocdm-framboise-dark: #a4205f;
  --ocdm-framboise-light:#e57fab;
  --ocdm-framboise-soft: rgba(201, 53, 122, 0.10);
  --ocdm-framboise-softer: rgba(201, 53, 122, 0.18);

  --ocdm-fuchsia:        #b8326e;
  --ocdm-fuchsia-dark:   #91215a;
  --ocdm-fuchsia-light:  #d96aa1;
  --ocdm-fuchsia-soft:   rgba(184, 50, 110, 0.10);

  --ocdm-terracotta:     #c5552a;
  --ocdm-terracotta-dark:#a13d1a;
  --ocdm-terracotta-light:#e88a5e;
  --ocdm-terracotta-soft:rgba(197, 85, 42, 0.10);

  --ocdm-moutarde:       #d99617;
  --ocdm-moutarde-dark:  #b07810;
  --ocdm-moutarde-light: #ecbb5a;
  --ocdm-moutarde-soft:  rgba(217, 150, 23, 0.12);

  /* ────────────────────────────────────────────────────────────────
     Typographie
     ──────────────────────────────────────────────────────────────── */

  --ocdm-font-display:   "Fraunces", "Georgia", "Times New Roman", serif;
  --ocdm-font-body:      "Nunito Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --ocdm-font-hand:      "Caveat", "Kalam", "Comic Sans MS", cursive;
  --ocdm-font-mono:      "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Type scale — fluide via clamp() (mobile → desktop) */
  --ocdm-fs-xs:          0.75rem;                                  /* 12px */
  --ocdm-fs-sm:          0.875rem;                                 /* 14px */
  --ocdm-fs-base:        1rem;                                     /* 16px */
  --ocdm-fs-lg:          1.125rem;                                 /* 18px */
  --ocdm-fs-xl:          1.25rem;                                  /* 20px */
  --ocdm-fs-2xl:         clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);/* 22→26 */
  --ocdm-fs-3xl:         clamp(1.625rem, 1.4rem + 1vw, 2rem);      /* 26→32 */
  --ocdm-fs-4xl:         clamp(2rem, 1.7rem + 1.5vw, 2.75rem);     /* 32→44 */
  --ocdm-fs-5xl:         clamp(2.5rem, 2rem + 2.5vw, 4rem);        /* 40→64 */
  --ocdm-fs-6xl:         clamp(3rem, 2.4rem + 3.2vw, 5rem);        /* 48→80 */

  --ocdm-lh-tight:       1.05;
  --ocdm-lh-snug:        1.2;
  --ocdm-lh-normal:      1.5;
  --ocdm-lh-relaxed:     1.65;

  --ocdm-fw-regular:     400;
  --ocdm-fw-medium:      500;
  --ocdm-fw-semibold:    600;
  --ocdm-fw-bold:        700;

  /* ────────────────────────────────────────────────────────────────
     Espacements — échelle 8pt (un peu de 4pt pour les micro-détails)
     ──────────────────────────────────────────────────────────────── */

  --ocdm-space-0:        0;
  --ocdm-space-1:        0.25rem;   /*  4px */
  --ocdm-space-2:        0.5rem;    /*  8px */
  --ocdm-space-3:        0.75rem;   /* 12px */
  --ocdm-space-4:        1rem;      /* 16px */
  --ocdm-space-5:        1.5rem;    /* 24px */
  --ocdm-space-6:        2rem;      /* 32px */
  --ocdm-space-7:        2.5rem;    /* 40px */
  --ocdm-space-8:        3rem;      /* 48px */
  --ocdm-space-9:        4rem;      /* 64px */
  --ocdm-space-10:       5rem;      /* 80px */
  --ocdm-space-11:       6rem;      /* 96px */
  --ocdm-space-12:       8rem;      /* 128px */

  /* ────────────────────────────────────────────────────────────────
     Layout
     ──────────────────────────────────────────────────────────────── */

  --ocdm-container-max:  1280px;
  --ocdm-container-pad-x: clamp(1rem, 2vw + 0.5rem, 2.5rem);

  /* Breakpoints (Bootstrap 5 Barrio) — informatifs (utilisés en MQ) */
  --ocdm-bp-sm:          576px;
  --ocdm-bp-md:          768px;
  --ocdm-bp-lg:          992px;
  --ocdm-bp-xl:          1200px;
  --ocdm-bp-xxl:         1400px;

  /* ────────────────────────────────────────────────────────────────
     Bordures & rayons
     ──────────────────────────────────────────────────────────────── */

  --ocdm-radius-xs:      4px;
  --ocdm-radius-sm:      6px;
  --ocdm-radius-md:      10px;
  --ocdm-radius-lg:      16px;
  --ocdm-radius-xl:      24px;
  --ocdm-radius-pill:    999px;
  /* Rayon "main-drawn" — légèrement irrégulier pour donner le côté hand-made */
  --ocdm-radius-rough:   10px 14px 11px 13px / 13px 10px 14px 11px;

  --ocdm-border-width:   1px;
  --ocdm-border-strong:  1.5px;

  /* ────────────────────────────────────────────────────────────────
     Ombres
     ──────────────────────────────────────────────────────────────── */

  --ocdm-shadow-xs:      0 1px 2px rgba(42, 34, 24, 0.05);
  --ocdm-shadow-sm:      0 2px 6px rgba(42, 34, 24, 0.08);
  --ocdm-shadow-md:      0 6px 14px rgba(42, 34, 24, 0.10);
  --ocdm-shadow-lg:      0 14px 28px rgba(42, 34, 24, 0.12);
  --ocdm-shadow-polaroid: 0 4px 14px rgba(42, 34, 24, 0.14), 0 1px 3px rgba(42, 34, 24, 0.10);

  /* ────────────────────────────────────────────────────────────────
     Transitions
     ──────────────────────────────────────────────────────────────── */

  --ocdm-transition-fast:    120ms cubic-bezier(0.4, 0, 0.2, 1);
  --ocdm-transition-base:    200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ocdm-transition-slow:    320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ────────────────────────────────────────────────────────────────
     Z-index
     ──────────────────────────────────────────────────────────────── */

  --ocdm-z-base:         1;
  --ocdm-z-sticky:       100;
  --ocdm-z-header:       500;
  --ocdm-z-overlay:      900;
  --ocdm-z-modal:        1000;
  --ocdm-z-toast:        1100;
}

/* ============================================================================
   THÈME PAPIER — option sage, dominant ocre/crème (référence)
   ============================================================================ */
:root[data-theme="paper"] {
  /* Surfaces */
  --ocdm-bg:                 var(--ocdm-paper-cream);
  --ocdm-bg-elevated:        var(--ocdm-paper-white);
  --ocdm-bg-sunken:          var(--ocdm-ink-050);
  --ocdm-bg-inverse:         var(--ocdm-ink-700);

  /* Surface textures décoratives — paper grain */
  --ocdm-bg-grain:
    radial-gradient(circle at 0 0, rgba(42, 34, 24, 0.04) 0.5px, transparent 0.5px),
    radial-gradient(circle at 6px 6px, rgba(42, 34, 24, 0.03) 0.5px, transparent 0.5px);
  --ocdm-bg-grain-size:      12px 12px;

  /* Texte */
  --ocdm-text:               var(--ocdm-ink-700);
  --ocdm-text-strong:        var(--ocdm-ink-900);
  --ocdm-text-muted:         var(--ocdm-ink-400);
  --ocdm-text-subtle:        var(--ocdm-ink-300);
  --ocdm-text-on-accent:     #fff5e3;
  --ocdm-text-inverse:       var(--ocdm-paper-cream);

  /* Bordures */
  --ocdm-border:             var(--ocdm-ink-200);
  --ocdm-border-soft:        var(--ocdm-ink-100);
  --ocdm-border-strong-color:var(--ocdm-ink-700);

  /* Couleurs sémantiques */
  --ocdm-primary:            var(--ocdm-ocre);
  --ocdm-primary-hover:      var(--ocdm-ocre-dark);
  --ocdm-primary-soft:       var(--ocdm-ocre-soft);
  --ocdm-primary-on:         #fff5e3;

  --ocdm-success:            var(--ocdm-sauge);
  --ocdm-success-soft:       var(--ocdm-sauge-soft);

  --ocdm-danger:             var(--ocdm-brique);
  --ocdm-danger-soft:        var(--ocdm-brique-soft);

  --ocdm-info:               var(--ocdm-petrole);
  --ocdm-info-soft:          var(--ocdm-petrole-soft);

  --ocdm-warning:            #c98a1f;
  --ocdm-warning-soft:       rgba(201, 138, 31, 0.12);

  /* Liens */
  --ocdm-link:               var(--ocdm-ocre);
  --ocdm-link-hover:         var(--ocdm-ocre-dark);
  --ocdm-link-visited:       var(--ocdm-ocre-dark);

  /* Sélection */
  --ocdm-selection-bg:       var(--ocdm-ocre);
  --ocdm-selection-fg:       #fff5e3;

  /* Décor — soulignés ondulés (utilisé par .ocdm-underline) */
  --ocdm-underline-color:    var(--ocdm-ocre);
  --ocdm-underline-weight:   2.5px;
}

/* ============================================================================
   THÈME FRAMBOISE (DÉFAUT) — fuchsia framboise + crème, chaleur + clin d'œil
   au fuchsia de l'ancien site, mais en version mature et profonde.
   ============================================================================ */
:root,
:root[data-theme="framboise"] {
  /* Fond crème un peu plus rosé pour souligner la framboise */
  --ocdm-bg:                 #fbf3ec;
  --ocdm-bg-elevated:        #fffaf3;
  --ocdm-bg-sunken:          #f4eadf;
  --ocdm-bg-inverse:         #2a1820;       /* prune profonde plutôt qu'encre */

  --ocdm-bg-grain:
    radial-gradient(circle at 0 0, rgba(74, 30, 50, 0.04) 0.5px, transparent 0.5px),
    radial-gradient(circle at 6px 6px, rgba(74, 30, 50, 0.03) 0.5px, transparent 0.5px);
  --ocdm-bg-grain-size:      12px 12px;

  --ocdm-text:               #2f2026;
  --ocdm-text-strong:        #1a0e14;
  --ocdm-text-muted:         #76616b;
  --ocdm-text-subtle:        #a89aa0;
  --ocdm-text-on-accent:     #fff5f0;
  --ocdm-text-inverse:       #fbf3ec;

  --ocdm-border:             #e5d2cf;
  --ocdm-border-soft:        #f0e2df;
  --ocdm-border-strong-color: #2a1820;

  /* Framboise = couleur signature */
  --ocdm-primary:            var(--ocdm-framboise);
  --ocdm-primary-hover:      var(--ocdm-framboise-dark);
  --ocdm-primary-soft:       var(--ocdm-framboise-soft);
  --ocdm-primary-on:         #fff5f0;

  /* Ocre devient secondaire (toujours là, sous-jacent) */
  --ocdm-success:            var(--ocdm-sauge);
  --ocdm-success-soft:       var(--ocdm-sauge-soft);

  /* Danger en cerise/groseille foncée — reste dans la famille rouge-rosé,
     ne clash pas avec le fuchsia framboise, suffisamment distinct pour alerter. */
  --ocdm-danger:             #a8264a;
  --ocdm-danger-soft:        rgba(168, 38, 74, 0.12);

  --ocdm-info:               var(--ocdm-ocre);    /* ocre devient un info chaleureux */
  --ocdm-info-soft:          var(--ocdm-ocre-soft);

  --ocdm-warning:            var(--ocdm-moutarde);
  --ocdm-warning-soft:       var(--ocdm-moutarde-soft);

  --ocdm-link:               var(--ocdm-framboise);
  --ocdm-link-hover:         var(--ocdm-framboise-dark);
  --ocdm-link-visited:       var(--ocdm-framboise-dark);

  --ocdm-selection-bg:       var(--ocdm-framboise);
  --ocdm-selection-fg:       #fff5f0;

  --ocdm-underline-color:    var(--ocdm-framboise);
  --ocdm-underline-weight:   3px;
}

/* ============================================================================
   THÈME TERRACOTTA — rouge brique chaud + accent framboise — option "chaleur
   maxi", très méditerranéen, idéal pour pages éditoriales.
   ============================================================================ */
:root[data-theme="terracotta"] {
  --ocdm-bg:                 #fbf1e7;
  --ocdm-bg-elevated:        #fff9f0;
  --ocdm-bg-sunken:          #f4e6d4;
  --ocdm-bg-inverse:         #2a1810;

  --ocdm-bg-grain:
    radial-gradient(circle at 0 0, rgba(80, 35, 15, 0.05) 0.5px, transparent 0.5px),
    radial-gradient(circle at 6px 6px, rgba(80, 35, 15, 0.03) 0.5px, transparent 0.5px);
  --ocdm-bg-grain-size:      12px 12px;

  --ocdm-text:               #2d1d12;
  --ocdm-text-strong:        #1a0d05;
  --ocdm-text-muted:         #7a6450;
  --ocdm-text-subtle:        #b3a08a;
  --ocdm-text-on-accent:     #fff5e3;
  --ocdm-text-inverse:       #fbf1e7;

  --ocdm-border:             #e8d4be;
  --ocdm-border-soft:        #f2e2cc;
  --ocdm-border-strong-color: #2a1810;

  --ocdm-primary:            var(--ocdm-terracotta);
  --ocdm-primary-hover:      var(--ocdm-terracotta-dark);
  --ocdm-primary-soft:       var(--ocdm-terracotta-soft);
  --ocdm-primary-on:         #fff5e3;

  --ocdm-success:            var(--ocdm-sauge);
  --ocdm-success-soft:       var(--ocdm-sauge-soft);

  --ocdm-danger:             #8e2614;
  --ocdm-danger-soft:        rgba(142, 38, 20, 0.10);

  /* Info = framboise (accent secondaire chaud, complément du terracotta) */
  --ocdm-info:               var(--ocdm-framboise);
  --ocdm-info-soft:          var(--ocdm-framboise-soft);

  --ocdm-warning:            var(--ocdm-moutarde);
  --ocdm-warning-soft:       var(--ocdm-moutarde-soft);

  --ocdm-link:               var(--ocdm-terracotta);
  --ocdm-link-hover:         var(--ocdm-terracotta-dark);
  --ocdm-link-visited:       var(--ocdm-terracotta-dark);

  --ocdm-selection-bg:       var(--ocdm-terracotta);
  --ocdm-selection-fg:       #fff5e3;

  --ocdm-underline-color:    var(--ocdm-framboise);
  --ocdm-underline-weight:   3px;
}

/* ============================================================================
   THÈME POP — fuchsia franc + moutarde + sauge — option plus jeune, plus
   vivante, esprit "festival adoptions / Instagram", presque néo-vintage.
   ============================================================================ */
:root[data-theme="pop"] {
  --ocdm-bg:                 #fff8ee;
  --ocdm-bg-elevated:        #ffffff;
  --ocdm-bg-sunken:          #fbecd8;
  --ocdm-bg-inverse:         #1a0e14;

  --ocdm-bg-grain:           none;
  --ocdm-bg-grain-size:      0;

  --ocdm-text:               #1f1320;
  --ocdm-text-strong:        #0e0510;
  --ocdm-text-muted:         #6e5868;
  --ocdm-text-subtle:        #a89aa3;
  --ocdm-text-on-accent:     #fffaf3;
  --ocdm-text-inverse:       #fff8ee;

  --ocdm-border:             #ead1e0;
  --ocdm-border-soft:        #f3e2ec;
  --ocdm-border-strong-color: #1a0e14;

  --ocdm-primary:            var(--ocdm-fuchsia);
  --ocdm-primary-hover:      var(--ocdm-fuchsia-dark);
  --ocdm-primary-soft:       var(--ocdm-fuchsia-soft);
  --ocdm-primary-on:         #ffffff;

  --ocdm-success:            #4f8a32;
  --ocdm-success-soft:       rgba(79, 138, 50, 0.12);

  --ocdm-danger:             #c5345e;       /* Rouge framboise-foncé, pas rouge classique */
  --ocdm-danger-soft:        rgba(197, 52, 94, 0.12);

  --ocdm-info:               var(--ocdm-moutarde);
  --ocdm-info-soft:          var(--ocdm-moutarde-soft);

  --ocdm-warning:            var(--ocdm-moutarde);
  --ocdm-warning-soft:       var(--ocdm-moutarde-soft);

  --ocdm-link:               var(--ocdm-fuchsia);
  --ocdm-link-hover:         var(--ocdm-fuchsia-dark);
  --ocdm-link-visited:       var(--ocdm-fuchsia-dark);

  --ocdm-selection-bg:       var(--ocdm-fuchsia);
  --ocdm-selection-fg:       #ffffff;

  --ocdm-underline-color:    var(--ocdm-moutarde);
  --ocdm-underline-weight:   3px;
}