/* ============================================================
   ECOCUVERIE — DESIGN TOKENS
   Source de vérité unique. À importer en premier.
   ============================================================ */

:root {
  /* ------- COULEURS ------- */

  /* Primaires (cohérence famille de marques eco-) */
  --color-forest-900: #0F2418;          /* shadows, hover deep */
  --color-forest-800: #1F3D2C;          /* PRIMARY · headers, CTA primaires */
  --color-forest-700: #2D5A3F;          /* hover, accents */
  --color-forest-600: #3F7556;
  --color-forest-100: #E8EEEA;          /* surfaces calmes */
  --color-forest-50:  #F2F5F3;

  /* Accents Ecocuverie (univers vin/chai) */
  --color-burgundy-900: #4A1220;
  --color-burgundy-800: #6B1A2C;        /* BURGUNDY · accent œno · max 5-10% */
  --color-burgundy-700: #8B2A40;
  --color-burgundy-100: #F4E8EB;

  --color-copper-800: #8C3F22;
  --color-copper-700: #A85332;          /* COPPER · CTA secondaires, FranceAgriMer */
  --color-copper-100: #F4E4DA;

  --color-straw-800: #B5874E;
  --color-straw-700: #D9A86C;           /* OR PAILLE · highlights, séparateurs */
  --color-straw-100: #F7EDDB;

  /* Neutres */
  --color-cream:      #FAFAF7;          /* fond global */
  --color-white:      #FFFFFF;          /* cards, formulaires */
  --color-stone-100:  #F2F1EB;
  --color-stone-200:  #E5E5E0;          /* bordures */
  --color-stone-300:  #D1D1CA;
  --color-stone-500:  #9B9B94;
  --color-stone-600:  #7A7A75;          /* texte secondaire */
  --color-stone-800:  #3D3D38;
  --color-ink:        #1A1A1A;          /* texte principal */

  /* Sémantiques */
  --color-success:    #0F6E56;
  --color-success-100: #DFF0EA;
  --color-warning:    #854F0B;
  --color-warning-100: #F6ECDA;
  --color-danger:     #993C1D;
  --color-danger-100: #F4DDD3;
  --color-info:       #1F4A6B;
  --color-info-100:   #DDE8F0;

  /* Tokens sémantiques (à utiliser dans le code app) */
  --bg-page:          var(--color-cream);
  --bg-surface:       var(--color-white);
  --bg-surface-alt:   var(--color-stone-100);
  --bg-inverse:       var(--color-forest-800);
  --bg-accent:        var(--color-burgundy-800);

  --fg-default:       var(--color-ink);
  --fg-muted:         var(--color-stone-600);
  --fg-subtle:        var(--color-stone-500);
  --fg-inverse:       var(--color-cream);
  --fg-accent:        var(--color-burgundy-800);
  --fg-link:          var(--color-forest-800);

  --border-subtle:    var(--color-stone-200);
  --border-default:   var(--color-stone-300);
  --border-strong:    var(--color-stone-600);
  --border-inverse:   rgba(250, 250, 247, 0.18);

  /* ------- TYPOGRAPHIE ------- */
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Échelle modulaire (base 16, ratio ~1.250 perfect fourth allégé) */
  --fs-display:   clamp(3.5rem, 6vw + 1rem, 5.5rem);  /* 56→88 */
  --fs-h1:        clamp(2.5rem, 4vw + 1rem, 4rem);    /* 40→64 */
  --fs-h2:        clamp(2rem, 2.5vw + 1rem, 3rem);    /* 32→48 */
  --fs-h3:        clamp(1.5rem, 1.2vw + 1rem, 2rem);  /* 24→32 */
  --fs-h4:        1.375rem;                            /* 22 */
  --fs-h5:        1.125rem;                            /* 18 */
  --fs-body-lg:   1.125rem;                            /* 18 */
  --fs-body:      1rem;                                /* 16 */
  --fs-body-sm:   0.875rem;                            /* 14 */
  --fs-caption:   0.75rem;                             /* 12 */
  --fs-eyebrow:   0.6875rem;                           /* 11 */

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-base:      1.55;
  --lh-relaxed:   1.65;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-base:    0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.08em;

  /* Optical sizing Fraunces (variable axis SOFT + opsz) */
  --fraunces-display: "opsz" 144, "SOFT" 30, "wght" 500;
  --fraunces-h:       "opsz" 72, "SOFT" 40, "wght" 500;
  --fraunces-text:    "opsz" 14, "SOFT" 50, "wght" 400;

  /* ------- ESPACEMENT (base 4) ------- */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */
  --space-40: 10rem;     /* 160 */

  /* ------- LAYOUT ------- */
  --container-max:    1400px;
  --container-pad:    clamp(1.25rem, 4vw, 3rem);
  --gutter:           1.5rem;
  --bp-sm:            640px;
  --bp-md:            1024px;
  --bp-lg:            1400px;

  /* ------- RADII ------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ------- SHADOWS (techniques, discrètes) ------- */
  --shadow-xs: 0 1px 0 rgba(26, 26, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05), 0 0 0 1px rgba(26, 26, 26, 0.03);
  --shadow-md: 0 4px 12px -2px rgba(26, 26, 26, 0.08), 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-lg: 0 12px 32px -8px rgba(26, 26, 26, 0.14), 0 2px 4px rgba(26, 26, 26, 0.04);
  --shadow-xl: 0 24px 48px -12px rgba(26, 26, 26, 0.18), 0 4px 8px rgba(26, 26, 26, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --focus-ring: 0 0 0 3px rgba(31, 61, 44, 0.22);
  --focus-ring-accent: 0 0 0 3px rgba(107, 26, 44, 0.22);

  /* ------- MOTION ------- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:       150ms;
  --dur-base:       240ms;
  --dur-slow:       400ms;
  --dur-deliberate: 600ms;

  /* ------- Z-INDEX ------- */
  --z-base:       1;
  --z-sticky:     50;
  --z-overlay:    100;
  --z-modal:      1000;
  --z-toast:      2000;
}