/* ==========================================================================
   Atelier Double Raisin — Design Tokens (Swiss / Inter)
   --------------------------------------------------------------------------
   Source de vérité pour les variables CSS du site.
   Cohérent avec colors_and_type.css du handoff design 2026-05.

   Esthétique : blanc pur, hairlines noires, accent unique RAISIN (#6E1C2C),
   typographie Inter + JetBrains Mono, zéro arrondi, zéro ombre (sauf modale).

   Inclus depuis :
   - chrome-open.php (mu-plugins/dr-ticketing/templates/partials/)
   - les pages WP via @import dans le theme (front-page.php / page-reservation.php)
   ========================================================================== */

:root {
  /* ── Surface ─────────────────────────────────────────────────────────── */
  --paper:       #FFFFFF;       /* fond app — blanc pur */
  --paper-soft:  #FAFAFA;       /* card sur paper (form fields) */
  --paper-deep:  #F4F4F2;       /* well / footer */
  --lait:        #FFFFFF;

  /* ── Ink (texte + hairlines) ─────────────────────────────────────────── */
  --ink:         #0A0A0A;       /* primary type, hairlines */
  --ink-2:       #2B2B2B;       /* secondary type (body) */
  --ink-3:       #6B6B6B;       /* metadata, captions */
  --ink-4:       #A0A0A0;       /* hints, disabled */

  /* ── Accent unique RAISIN ────────────────────────────────────────────── */
  --raisin:      #6E1C2C;
  --raisin-deep: #4A1220;
  --raisin-tint: #B85469;

  /* ── Hairlines ───────────────────────────────────────────────────────── */
  --rule:        #0A0A0A;
  --rule-soft:   #C9C5BB;
  --rule-faint:  #DEDAD0;

  /* ── States (statuts séances) ─────────────────────────────────────────── */
  --ok:          #3F6438;       /* sage — Confirmée / Ouvert */
  --waiting:     #A6701A;       /* ochre — Liste d'attente */
  --closed:      #6E1C2C;       /* raisin — Complet */
  --selected-bg: rgba(110, 28, 44, 0.08);

  /* ── Aliases (compat) ────────────────────────────────────────────────── */
  --bg:          var(--paper);
  --bg-elev:     var(--paper-soft);
  --bg-well:     var(--paper-deep);
  --fg:          var(--ink);
  --fg-2:        var(--ink-2);
  --fg-3:        var(--ink-3);
  --fg-muted:    var(--ink-4);
  --accent:      var(--raisin);
  --accent-deep: var(--raisin-deep);
  --accent-soft: var(--selected-bg);
  --border:      var(--rule);
  --border-soft: var(--rule-soft);
  /* Compat avec l'ancienne charte (paper warm) — certains fichiers
     utilisaient encore --gold, --stone, --charcoal. On les map ici pour
     éviter de tout casser pendant la transition. */
  --gold:        var(--raisin);
  --stone:       var(--ink-3);
  --charcoal:    var(--ink);

  /* ── Typo : Inter pour tout, JetBrains Mono pour mono ─────────────────── */
  --font-sans:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Compat ancien stack (DM Serif/DM Sans/Barlow) → Inter pour migration */
  --font-serif:   var(--font-sans);

  /* ── Tailles (4px Swiss baseline) ─────────────────────────────────────── */
  --t-xxl:   clamp(64px, 9vw, 144px);
  --t-xl:    clamp(40px, 5vw, 72px);
  --t-l:     clamp(28px, 3vw, 40px);
  --t-m:     20px;
  --t-base:  15px;
  --t-s:     13px;
  --t-xs:    11px;
  --t-2xs:   10px;

  /* ── Weights ─────────────────────────────────────────────────────────── */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ── Line heights ────────────────────────────────────────────────────── */
  --lh-tight:  0.92;
  --lh-snug:   1.10;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* ── Tracking ────────────────────────────────────────────────────────── */
  --tr-display: -0.035em;
  --tr-tight:   -0.02em;
  --tr-flat:    0;
  --tr-eyebrow: 0.18em;
  --tr-mono:    0.04em;

  /* ── Spacing (4px baseline) ───────────────────────────────────────────── */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* ── Radii (Swiss = sharp, exceptions seulement) ──────────────────────── */
  --r-0: 0;  --r-1: 2px;  --r-2: 4px;  --r-pill: 999px;

  /* ── Shadows (réservées aux modales) ──────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(10,10,10,0.06), 0 8px 24px -8px rgba(10,10,10,0.18);
  --shadow-2: 0 1px 0 rgba(10,10,10,0.06), 0 24px 48px -16px rgba(10,10,10,0.22);

  --hairline:      1px solid var(--rule);
  --hairline-soft: 1px solid var(--rule-soft);

  /* Compat héritée — variables que l'ancienne chrome injectait et qui
     pourraient être utilisées dans certains templates : map vers no-op
     ou des valeurs neutres. */
  --bg-veil:     0;
  --paper-grain: 0;
}

/* ==========================================================================
   Base typographie
   ========================================================================== */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-feature-settings: "ss01", "cv11";
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Presets sémantiques (utiliser directement comme classes)
   ========================================================================== */
.dr-display, h1.dr {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-xxl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.dr-h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.dr-h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-l);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.dr-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 20px;
  line-height: var(--lh-snug);
}
.dr-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--t-m);
  line-height: var(--lh-loose);
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.dr-body {
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--ink);
}
.dr-meta {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-2);
}
.dr-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-2xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}
.dr-mono {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-mono);
  font-feature-settings: "tnum";
  color: var(--ink);
}
.dr-caption {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* ==========================================================================
   Primitives
   ========================================================================== */
.dr-rule       { border: 0; border-top: var(--hairline);      margin: var(--s-5) 0; }
.dr-rule-soft  { border: 0; border-top: var(--hairline-soft); margin: var(--s-5) 0; }

/* Lien éditorial (souligné au hover, pas par défaut) */
.dr-link {
  position: relative;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: color 200ms;
}
.dr-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 250ms cubic-bezier(0.2,0,0,1);
}
.dr-link:hover::after { transform: scaleX(1); }
.dr-link:hover { color: var(--raisin); }

/* CTA noir (Option B) — bouton principal */
.dr-cta-ink {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 13px;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  padding: 14px 22px;
  border: none;
  background: var(--ink);
  color: #FBFAF7;
  cursor: pointer;
  transition: background 200ms;
  text-decoration: none;
}
.dr-cta-ink:hover { background: var(--ink-2); }
.dr-cta-ink .arrow {
  font-family: var(--font-mono); font-size: 14px;
  transition: transform 250ms;
}
.dr-cta-ink:hover .arrow { transform: translateX(3px); }

/* CTA raisin — réservé à l'urgence (place libérée 24h) */
.dr-cta-raisin {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 13px;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  padding: 14px 22px;
  border: none;
  background: var(--raisin);
  color: #FBFAF7;
  cursor: pointer;
  transition: background 200ms;
  text-decoration: none;
}
.dr-cta-raisin:hover { background: var(--raisin-deep); }

/* CTA outline (secondary) */
.dr-cta-line {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 13px;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  padding: 13px 21px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms, color 200ms;
  text-decoration: none;
}
.dr-cta-line:hover { background: var(--ink); color: #FBFAF7; }

/* Pill / chip de statut */
.dr-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: var(--w-medium);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.dr-pill .d { width: 6px; height: 6px; border-radius: 50%; }
.dr-pill-confirmed { background: rgba(63,100,56,0.10); color: var(--ok); }
.dr-pill-confirmed .d { background: var(--ok); }
.dr-pill-waiting   { background: rgba(166,112,26,0.14); color: var(--waiting); }
.dr-pill-waiting .d { background: var(--waiting); }
.dr-pill-cancelled { background: rgba(110,28,44,0.10); color: var(--raisin); }
.dr-pill-cancelled .d { background: var(--raisin); }

:focus-visible { outline: 2px solid var(--raisin); outline-offset: 2px; }