/* =========================================================================
   Coup d'tête & Paillettes — Design Tokens
   Color, type, spacing, motion. Enqueued first via functions.php.

   CHEMINS : les @font-face utilisent des chemins relatifs au dossier CSS.
   En production WP, ce fichier est servi depuis :
     /wp-content/themes/cdtp-child/assets/css/tokens.css
   Les fonts sont dans :
     /wp-content/themes/cdtp-child/assets/fonts/
   → chemin relatif : ../../assets/fonts/ (deux niveaux au-dessus de css/)
      soit : ../fonts/
   ========================================================================= */

/* ---- Brand fonts ---------------------------------------------------------
   - Pirata One           → "Coup d'tête" (gothique tatoué) — LOCAL .ttf
   - Monsieur La Doulaise → "& Paillettes" (script délicat)  — LOCAL .ttf
   - Gentium Book Basic   → esperluette (&) en italic        — LOCAL .ttf
   - Velvelyne            → display / corps UI               — LOCAL .otf (4 graisses)
   - Space Grotesk        → corps / UI fallback              — Google Fonts
   - JetBrains Mono       → meta « imprimé au grenier »      — Google Fonts
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Pirata One";
  src: url("../fonts/PirataOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Monsieur La Doulaise";
  src: url("../fonts/MonsieurLaDoulaise-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gentium Book Basic";
  src: url("../fonts/GenBkBasR.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Velvelyne";
  src: url("../fonts/Velvelyne-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Velvelyne";
  src: url("../fonts/Velvelyne-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Velvelyne";
  src: url("../fonts/Velvelyne-Regular.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Velvelyne";
  src: url("../fonts/Velvelyne-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap");

/* Disable browser faux-bold / faux-italic — Pirata One et Monsieur La Doulaise
   n'ont qu'une graisse. Sans cette règle, les <h1>/<h2> héritant de font-weight:bold
   rendent la typo blurry. */
html {
  font-synthesis-weight: none;
  font-synthesis-style: none;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Blocksy et WP injectent font-weight: bold sur les headings via UA ou theme.
   On force tous les headings à 400 ; ajouter font-weight: 700 explicitement
   si la typo utilisée a vraiment un bold. */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

:root {
  /* ====================================================================
     PALETTE — interface
     Noir + blanc + rouge. L'arc-en-ciel appartient aux produits, pas à l'UI.
     ==================================================================== */

  /* Ink — le grenier la nuit, les poutres, les coins d'ombre */
  --ink-1000: #0a0807;   /* fond le plus profond — "lumière éteinte" */
  --ink-900:  #14110f;   /* fond principal "découvert sous la lampe" */
  --ink-800:  #1f1b18;   /* surface élevée (cartes, modales) */
  --ink-700:  #2b2622;   /* surface contraste / hover */
  --ink-600:  #3a342f;   /* bordures, séparateurs */
  --ink-500:  #5a5048;   /* texte tertiaire, désactivé */

  /* Paper — la résine, la lumière qui découpe */
  --paper-100: #f6f1ea;  /* blanc cassé — papier MDF + résine, jamais 100% blanc */
  --paper-200: #ebe3d8;
  --paper-300: #d3c8b8;  /* parchemin / tract froissé */

  /* Sang — accent unique, à utiliser avec violence et économie */
  --blood-500: #c8261c;  /* rouge brique vif — CTA, alerts, accents */
  --blood-600: #9e1a13;  /* rouge brique profond — fond bouton */
  --blood-700: #6c1009;  /* rouge nuit — pression / ombres rouges */
  --blood-300: #e96459;  /* rouge clair — hover sur sang */

  /* Brique — pour la matière des fonds, jamais en aplats UI */
  --brick-700: #5a2a22;
  --brick-600: #7a3a30;
  --brick-500: #9a4a3c;

  /* Sémantique — interface */
  --bg-base:        var(--ink-900);
  --bg-elevated:    var(--ink-800);
  --bg-overlay:     rgba(10, 8, 7, 0.78);
  --bg-spot:        radial-gradient(ellipse at center, rgba(246,241,234,0.10) 0%, transparent 60%);

  --fg-1:           var(--paper-100);    /* texte principal */
  --fg-2:           #c7bdb0;             /* texte secondaire */
  --fg-3:           var(--ink-500);      /* texte tertiaire */
  --fg-inverse:     var(--ink-900);      /* texte sur paper */
  --fg-accent:      var(--blood-500);    /* accent texte / liens */

  --border-1:       var(--ink-600);
  --border-2:       var(--ink-700);
  --border-accent:  var(--blood-600);

  --action-bg:        var(--blood-600);
  --action-bg-hover:  var(--blood-500);
  --action-bg-press:  var(--blood-700);
  --action-fg:        var(--paper-100);

  --action-ghost-fg:        var(--paper-100);
  --action-ghost-border:    var(--ink-600);
  --action-ghost-bg-hover:  var(--ink-700);

  /* Produits — palette "produits" (NE PAS utiliser en UI chrome) */
  --product-pink:    #ff3aa6;
  --product-magenta: #c81e7a;
  --product-orange:  #ff8a1f;
  --product-yellow:  #ffd23a;
  --product-green:   #2f7a3a;
  --product-trash:   #1c4d2a;
  --product-cyan:    #4ec5e8;
  --product-trans:   #f7a8b8;

  /* ====================================================================
     TYPE — deux voix, plus une voix neutre utilitaire
     ==================================================================== */
  --font-blackletter: "Pirata One", "UnifrakturCook", "Times New Roman", serif;
  --font-script:      "Monsieur La Doulaise", "Allura", "Snell Roundhand", "Apple Chancery", cursive;
  --font-amp:         "Gentium Book Basic", "Garamond", "Times New Roman", serif;
  --font-display:     "Velvelyne", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans:        "Velvelyne", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Echelle type — sur fond sombre, on monte les corps */
  --type-12:  12px;
  --type-14:  14px;
  --type-16:  16px;
  --type-18:  18px;
  --type-22:  22px;
  --type-28:  28px;
  --type-36:  36px;
  --type-48:  48px;
  --type-64:  64px;
  --type-96:  96px;
  --type-128: 128px;

  --leading-tight: 0.95;
  --leading-snug:  1.15;
  --leading-body:  1.5;
  --leading-loose: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-stencil:  0.18em; /* small caps stencil — affiches, étiquettes */

  /* ====================================================================
     SPACING — base 4. Generous on dark backgrounds.
     ==================================================================== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ====================================================================
     RADII — punk artisanal : peu de rondeurs, jamais de "soft pill" SaaS.
     ==================================================================== */
  --radius-0:    0;
  --radius-1:    2px;
  --radius-2:    4px;
  --radius-3:    8px;
  --radius-pill: 999px; /* réservé aux tags + boutons d'accent */

  /* ====================================================================
     ELEVATION — pas de soft drop shadows. Spots de lumière + ombres dures.
     ==================================================================== */
  --shadow-spot:     0 0 80px -10px rgba(246,241,234,0.20);         /* halo lampe d'atelier — RÉSERVÉ aux spots */
  --shadow-hard:     6px 6px 0 0 var(--ink-1000);                   /* ombre dure type sérigraphie */
  --shadow-hard-sm:  3px 3px 0 0 var(--ink-1000);                   /* ombre dure compacte */
  --shadow-card:     0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 24px -12px rgba(0,0,0,0.6);
  --shadow-pin:      0 8px 24px -8px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.04) inset;
  --shadow-action:   3px 3px 0 0 var(--ink-1000);                   /* ombre dure actions — matière, pas glow */

  /* ====================================================================
     TEXTURES — overlays CSS (pas de photos pleine page)
     ==================================================================== */
  --grain-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* ====================================================================
     MOTION — sec, pas de bounce SaaS. On éclaire / on cogne.
     ==================================================================== */
  --ease-out-hard: cubic-bezier(0.16, 0.84, 0.30, 1);
  --ease-in-hard:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-step:     steps(6, end);  /* éclairage type tube fluo qui s'allume */
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* =========================================================================
   SEMANTIC TYPE — classes utilitaires prêtes à l'emploi
   ========================================================================= */
.cdtp-display {
  font-family: var(--font-blackletter);
  font-weight: 400;
  font-size: var(--type-96);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-1);
  text-shadow: 3px 3px 0 var(--ink-1000);
}

.cdtp-h1 {
  font-family: var(--font-blackletter);
  font-weight: 400;
  font-size: var(--type-64);
  line-height: var(--leading-tight);
  color: var(--fg-1);
}

.cdtp-h2 {
  font-family: var(--font-blackletter);
  font-weight: 400;
  font-size: var(--type-48);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.cdtp-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--type-64);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.cdtp-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-28);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.cdtp-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-12);
  line-height: 1;
  letter-spacing: var(--tracking-stencil);
  text-transform: uppercase;
  color: var(--fg-2);
}

.cdtp-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-16);
  line-height: var(--leading-body);
  color: var(--fg-1);
}

.cdtp-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-18);
  line-height: var(--leading-body);
  color: var(--fg-1);
}

.cdtp-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--type-12);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
  text-transform: uppercase;
}

.cdtp-quote {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--type-36);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

/* =========================================================================
   BACKGROUND UTILITIES
   Déplacées dans global.css — ne pas redéfinir ici.
   ========================================================================= */