/**
 * Design system — relevé sur la maquette « Atelier néon ».
 *
 * Aucune valeur n'est inventée : les couleurs, tailles et espacements
 * viennent de Main.dc.html. Toute nouvelle valeur doit devenir un jeton ici
 * plutôt qu'être écrite en dur dans un composant.
 */

:root {
  /* --- fonds --- */
  --dg-bg:            #0A0C0B;
  --dg-bg-deep:       #050706;
  --dg-surface:       #0D1211;
  --dg-surface-2:     #101615;
  --dg-raised:        #161C1A;
  --dg-line:          #1F2825;
  --dg-line-strong:   #2A3531;

  /* --- encres --- */
  --dg-ink:           #FFFFFF;
  --dg-ink-2:         #E8EDEA;
  --dg-ink-3:         #C6D0CB;
  --dg-muted:         #A9B5AF;
  --dg-faint:         #7E8C86;
  --dg-dim:           #4A5B54;

  /* --- accent et néons --- */
  --dg-accent:        #39FF6A;
  --dg-accent-soft:   #8CFFAC;
  --dg-accent-glow:   rgba(57, 255, 106, 0.6);
  --dg-accent-line:   rgba(57, 255, 106, 0.35);
  --dg-accent-wash:   rgba(57, 255, 106, 0.10);
  --dg-neon-cyan:     #00D5FF;
  --dg-neon-violet:   #7A5CFF;
  --dg-neon-pink:     #FF3D9A;
  --dg-neon-amber:    #FFB53D;

  /* --- états --- */
  --dg-ok:            #39FF6A;
  --dg-warn:          #FFB53D;
  --dg-error:         #FF5A5A;

  /* --- typographie --- */
  --dg-font-display:  'Unbounded', 'Trebuchet MS', system-ui, sans-serif;
  --dg-font-body:     'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --dg-t-hero:        clamp(38px, 4.2vw, 60px);
  --dg-t-h2:          clamp(26px, 2.4vw, 32px);
  --dg-t-h3:          21px;
  --dg-t-lead:        17.5px;
  --dg-t-body:        15px;
  --dg-t-sm:          14px;
  --dg-t-xs:          13px;
  --dg-t-label:       12.5px;

  --dg-lh-hero:       1.03;
  --dg-lh-tight:      1.2;
  --dg-lh-body:       1.6;

  --dg-ls-display:    -0.035em;
  --dg-ls-h2:         -0.025em;
  --dg-ls-label:      0.08em;

  /* --- espacements --- */
  --dg-s-1:  4px;
  --dg-s-2:  9px;
  --dg-s-3:  14px;
  --dg-s-4:  22px;
  --dg-s-5:  26px;
  --dg-s-6:  40px;
  --dg-s-7:  64px;
  --dg-s-8:  78px;

  --dg-gut:           56px;   /* marge horizontale des sections */
  --dg-section-y:     78px;   /* respiration verticale des sections */
  --dg-max:           1328px; /* 1440 moins deux gouttières */
  --dg-measure:       470px;  /* largeur de lecture confortable */

  /* --- formes --- */
  --dg-r-sm:    7px;
  --dg-r:       11px;
  --dg-r-lg:    14px;
  --dg-r-pill:  999px;

  --dg-ring:    0 0 0 2px var(--dg-surface-2), 0 0 0 4px var(--dg-accent);
  --dg-shadow:  0 18px 44px rgba(0, 0, 0, 0.45);

  --dg-ease:    cubic-bezier(0.4, 0, 0.2, 1);

  /* WooCommerce peint ses prix, ses liens et ses états avec ses propres
     variables. Les repointer ici corrige d'un coup tout ce que le thème ne
     peut pas atteindre par sélecteur — le prix sortait en #958E09, un jaune
     olive qui n'appartient à aucune palette du projet. */
  --wc-highlight:      var(--dg-accent);
  --wc-highlight-text: var(--dg-bg-deep);
  --wc-primary:        var(--dg-accent);
  --wc-primary-text:   var(--dg-bg-deep);
  --wc-green:          var(--dg-ok);
  --wc-red:            var(--dg-error);
  --wc-orange:         var(--dg-warn);
  --wc-secondary:      var(--dg-surface-2);
  --wc-secondary-text: var(--dg-ink-2);
  --wc-form-border-color: var(--dg-line-strong);
  --wc-form-border-radius: var(--dg-r-sm);
  --wc-subtext:        var(--dg-faint);
  --wc-content-bg:     var(--dg-surface);
}

/* La direction est volontairement sombre et unique : le néon est le sujet,
   il lui faut un fond noir. Pas de variante claire — mais le fond est peint
   explicitement pour que la page ne dépende jamais de son hôte. */