/* ============================================================
   PADEL COLLECTION — Design tokens
   Source : design-system.html v1.0
   ============================================================ */

:root {
  /* ---- Palette ---- */
  --color-sand:       #F7EED8;
  --color-vanille:    #EFD6B9;
  --color-gres:       #D4A87D;
  --color-rouille:    #BD552F;
  --color-terracotta: #8E402A;
  --color-noir:       #1F1616;

  /* ---- Mappings sémantiques ---- */
  --color-bg:            var(--color-sand);
  --color-text:          var(--color-noir);
  --color-text-muted:    var(--color-terracotta);
  --color-text-on-dark:  var(--color-sand);
  --color-accent:        var(--color-rouille);
  --color-surface:       var(--color-vanille);
  --color-border:        rgba(31, 22, 22, 0.12);
  --color-border-strong: rgba(31, 22, 22, 0.25);

  /* ---- Espaces (échelle base 6) ---- */
  --space-xs: 6px;
  --space-s:  12px;
  --space-m:  24px;
  --space-l:  48px;
  --space-xl: 96px;

  /* ---- Grille 12 colonnes ----
     Margin et gutter à 12pt (≈ 16px en CSS).
     1pt ≈ 1.333px ; on retient la valeur ronde 16px qui est
     l'équivalent web standard du 12pt typo. */
  --grid-columns: 12;
  --grid-gutter:  16px;
  --grid-margin:  16px;
  --grid-max-width: 1440px;

  /* ---- Polices ---- */
  --font-display:           "transducer-extended-black", "Arial Narrow", sans-serif;
  --font-display-bold:      "transducer-bold", "Arial Narrow", sans-serif;
  --font-display-condensed: "transducer-condensed-medium", "Arial Narrow", sans-serif;
  --font-display-hairline:  "transducer-hairline-italic", "Arial Narrow", sans-serif;
  --font-body:              "oculi-text-regular-italic", Georgia, serif;
  --font-mono:              ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* ---- Tailles typo ---- */
  --fs-h1:       144px;
  --fs-h2:       48px;
  --fs-h3:       24px;
  --fs-h4:       18px;
  --fs-h5:       14px;
  --fs-text-1:   24px;
  --fs-text-2:   18px;
  --fs-button:   12px;
  --fs-label:    12px;
  --fs-mentions: 14px;

  /* ---- Rayons ---- */
  --radius-card:    16px;
  --radius-button:  12px;
  --radius-badge:   4px;
  --radius-input:   8px;
  --radius-swatch:  12px;

  /* ---- Easing & durations ---- */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 600ms;
}

/* H1 et H2 fluides en mobile (cohérent avec le DS) */
@media (max-width: 1024px) {
  :root {
    --fs-h1:     clamp(64px, 12vw, 144px);
    --fs-h2:     clamp(32px, 5vw, 48px);
    --fs-text-1: clamp(18px, 2.2vw, 24px);
  }
}