/* ==========================================================================
   GUIVONIZ — Design tokens
   Référence de style : "Seed" — living organism under laboratory glass
   Thème : light. Zéro ombre, zéro dégradé, zéro bordure décorative.
   ========================================================================== */

:root {
  /* ---------- Couleurs ---------- */
  --color-forest-depths: #1c3a13;
  --color-lime-pulse:    #d3fa99;
  --color-sage-moss:     #757c5d;
  --color-olive-gold:    #9f995b;
  --color-eucalyptus:    #698e79;
  --color-snow-white:    #fcfcf7;
  --color-warm-stone:    #eeeee9;
  --color-frosted-glass: #c4c7c4;
  --color-ash:           #b3b3b3;
  --color-pewter:        #666666;
  --color-ink:           #000000;

  /* ---------- Surfaces ---------- */
  --surface-page-canvas:      #fcfcf7;
  --surface-card-surface:     #eeeee9;
  --surface-dark-section:     #1c3a13;
  --surface-accent-highlight: #d3fa99;

  /* ---------- Typographie : familles ---------- */
  --font-seed-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-seed-sans-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------- Typographie : échelle ---------- */
  --text-micro: 10px;      --leading-micro: 1;      --tracking-micro: 0px;
  --text-label: 12px;      --leading-label: 1.5;    --tracking-label: 0px;
  --text-caption: 14px;    --leading-caption: 1.4;  --tracking-caption: 0px;
  --text-body-sm: 16px;    --leading-body-sm: 1.5;  --tracking-body-sm: 0px;
  --text-body: 18px;       --leading-body: 1.3;     --tracking-body: -0.18px;
  --text-subheading: 24px; --leading-subheading: 1.2; --tracking-subheading: -0.48px;
  --text-heading-sm: 32px; --leading-heading-sm: 1.5; --tracking-heading-sm: 0px;
  --text-heading: 36px;    --leading-heading: 1;    --tracking-heading: 0px;
  --text-heading-lg: 40px; --leading-heading-lg: 1.1; --tracking-heading-lg: -0.4px;
  --text-display: 48px;    --leading-display: 1.1;  --tracking-display: -0.72px;

  /* ---------- Typographie : graisses ---------- */
  --font-weight-light: 300;
  --font-weight-w350: 350;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* ---------- Espacements (base 8px) ---------- */
  --spacing-unit: 8px;
  --spacing-8: 8px;    --spacing-16: 16px;  --spacing-24: 24px;
  --spacing-32: 32px;  --spacing-40: 40px;  --spacing-48: 48px;
  --spacing-56: 56px;  --spacing-64: 64px;  --spacing-80: 80px;
  --spacing-96: 96px;  --spacing-128: 128px;

  /* ---------- Layout ---------- */
  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 16px;
  --element-gap: 8px;
  --page-gutter: 24px;

  /* ---------- Rayons ---------- */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-3xl: 32px;
  --radius-full: 1000px;

  --radius-cards: 16px;
  --radius-badges: 1000px;
  --radius-inputs: 8px;
  --radius-buttons: 1000px;
  --radius-large-cards: 32px;

  /* ---------- Mouvement ---------- */
  --ease-organic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-glass:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-settle:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 820ms;
  --dur-reveal: 1100ms;

  /* ---------- Profondeur 3D (perspective, pas d'ombre) ---------- */
  --perspective-near: 700px;
  --perspective-far: 1400px;
}

/* Les grandes typos se resserrent sur desktop, se détendent sur mobile */
@media (max-width: 860px) {
  :root {
    --text-display: 36px;    --tracking-display: -0.54px;
    --text-heading-lg: 30px; --tracking-heading-lg: -0.3px;
    --text-heading: 28px;
    --text-heading-sm: 24px;
    --text-subheading: 20px; --tracking-subheading: -0.4px;
    --text-body: 17px;
    /* 14 px est confortable à 50 cm sur un écran d'ordinateur, pas à bout de
       bras sur un téléphone. Le texte de lecture des fiches produit — celui
       sur lequel on décide d'acheter — utilise `caption` : on le monte à
       16 px, la référence de confort sur mobile. Les étiquettes (`label`,
       `micro`) restent petites : ce sont des repères, pas de la lecture. */
    --text-caption: 16px;    --leading-caption: 1.5;
    --section-gap: 48px;
    --page-gutter: 20px;
  }
}