/**
 * tokens.css — EPP
 * Palette, glassmorphism, bento, typographie
 * WP0 v1.0 — 2026-06-08
 */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500&display=swap');

:root {

  /* ── Palette Management — 6 couleurs canoniques ─────────────────────────── */
  --color-ivoire:     #FAF7EE;
  --color-brun:       #2E0F03;
  --color-terracotta: #9D614F;
  --color-amber:      #C4844A;
  --color-creme:      #F6DFC1;
  --color-sable:      #DDBCA7;

  /* ── Dérivés fonctionnels ────────────────────────────────────────────────── */
  --color-text-primary:   var(--color-brun);
  --color-text-secondary: rgba(46, 15, 3, 0.65);
  --color-text-muted:     rgba(46, 15, 3, 0.40);
  --color-bg-page:        var(--color-ivoire);
  --color-accent:         var(--color-terracotta);
  --color-accent-2:       var(--color-amber);

  /* ── Succès / Erreur / Warning ───────────────────────────────────────────── */
  --color-success: #5C8A5A;
  --color-error:   #B94040;
  --color-warning: var(--color-amber);

  /* ── Glassmorphism ───────────────────────────────────────────────────────── */
  --glass-bg:          rgba(246, 223, 193, 0.45);
  --glass-bg-strong:   rgba(246, 223, 193, 0.70);
  --glass-border:      rgba(221, 188, 167, 0.55);
  --glass-blur:        blur(18px);
  --glass-shadow:      0 8px 32px rgba(46, 15, 3, 0.10);
  --glass-dark-bg:     rgba(46, 15, 3, 0.30);
  --glass-dark-border: rgba(221, 188, 167, 0.20);

  /* ── Bento grid ──────────────────────────────────────────────────────────── */
  --bento-gap:        16px;
  --bento-radius:     20px;
  --bento-radius-sm:  12px;
  --bento-padding:    28px;
  --bento-padding-sm: 20px;

  /* ── Typographie ─────────────────────────────────────────────────────────── */
  --font-family: 'Poppins', sans-serif;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  --text-hero: 40px;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --leading-tight:  1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ── Tokens hérités (compatibilité WP1-WP6) ─────────────────────────────── */
  --color-primary:        #664234;
  --color-primary-dark:   #2E0F03;
  --color-text:           #2E0F03;
  --color-text-faint:     rgba(46, 15, 3, 0.32);
  --color-text-dark:      #FAF7EE;
  --color-text-on-primary:#FAF7EE;
  --color-border:         #DDBCA7;
  --color-border-light:   #F6DFC1;
  --color-focus-ring:     rgba(102, 66, 52, 0.35);
  --color-progress-track: #DDBCA7;
  --color-accent-hover:   #7A4A3A;
  --color-accent-muted:   rgba(157, 97, 79, 0.12);
  --color-surface:        rgba(255, 255, 255, 0.70);
  --color-surface-hover:  rgba(255, 255, 255, 0.90);
  --color-bg-card:        #FFFFFF;
  --color-bg-surface:     #F6DFC1;
  --color-ivory-border:   #DDBCA7;
  --color-ivory-text:     #2E0F03;
  --color-ivory-text-muted:#9D614F;
  --color-success-bg:     #E8F5EE;
  --color-success-text:   #025C37;
  --color-error-bg:       #FAEAEA;
  --color-error-text:     #8B2020;
  --color-warning-bg:     #FEF3DC;
  --color-warning-text:   #7A4A08;

  --glass-white:        rgba(255, 255, 255, 0.70);
  --glass-white-hover:  rgba(255, 255, 255, 0.88);
  --glass-white-strong: rgba(255, 255, 255, 0.94);
  --glass-warm:         rgba(250, 247, 238, 0.78);
  --glass-warm-strong:  rgba(250, 247, 238, 0.94);
  --glass-dark:         rgba(46, 15, 3, 0.58);
  --glass-border-light: rgba(255, 255, 255, 0.75);
  --glass-border-warm:  rgba(221, 188, 167, 0.55);
  --glass-border-dark:  rgba(157, 97, 79, 0.28);
  --glass-inset-light:  inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glass-inset-warm:   inset 0 1px 0 rgba(250, 247, 238, 0.70);
  --glass-blur-sm:      blur(10px);
  --glass-blur-xs:      blur(6px);

  --font-size-xs:        0.70rem;
  --font-size-sm:        0.875rem;
  --font-size-base:      1rem;
  --font-size-md:        1.0625rem;
  --font-size-lg:        1.25rem;
  --font-size-xl:        1.5rem;
  --font-size-2xl:       2rem;
  --font-size-3xl:       2.625rem;
  --font-weight-light:   300;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  16px;
  --spacing-xl:  24px;
  --spacing-2xl: 40px;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;
  --radius-btn:  var(--radius-md);

  --shadow-sm:          0 1px 4px rgba(46,15,3,0.07), 0 1px 2px rgba(46,15,3,0.05);
  --shadow-md:          0 4px 20px rgba(46,15,3,0.09), 0 2px 8px rgba(46,15,3,0.06);
  --shadow-lg:          0 12px 40px rgba(46,15,3,0.13), 0 4px 14px rgba(46,15,3,0.08);
  --shadow-glow:        0 0 0 3px rgba(157,97,79,0.25), 0 6px 24px rgba(157,97,79,0.22);
  --shadow-glass:       0 8px 32px rgba(46,15,3,0.09), inset 0 1px 0 rgba(255,255,255,0.70);
  --shadow-glass-hover: 0 16px 48px rgba(46,15,3,0.14), inset 0 1px 0 rgba(255,255,255,0.80);

  --transition-fast: 140ms ease;
  --transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);

  --z-header:       100;
  --z-footer:       100;
  --z-modal:        200;
  --z-screen-title: 300;
  --z-export-bar:   400;

  --header-height: 64px;
  --footer-height: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

* {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}