*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {

  /* ══════════════════════════════════════════
     DESIGN SYSTEM — ProTrust
     ══════════════════════════════════════════ */

  /* ── Color scale: Primary (forest green) ── */
  --color-primary-25:  #F0F7F0;
  --color-primary-50:  #E8F5E9;
  --color-primary-100: #C8E6C9;
  --color-primary-200: #A5D6A7;
  --color-primary-300: #81C784;
  --color-primary-400: #4CAF50;
  --color-primary-500: #388E3C;
  --color-primary-600: #2E7D32;
  --color-primary-700: #1D551E;
  --color-primary-800: #163F17;
  --color-primary-900: #0D2B0E;
  --color-primary-950: #061506;

  /* ── Color scale: Secondary (warm amber — artisanal) ── */
  --color-secondary-25:  #FFFBF2;
  --color-secondary-50:  #FFF8E1;
  --color-secondary-100: #FFECB3;
  --color-secondary-200: #FFE082;
  --color-secondary-300: #FFD54F;
  --color-secondary-400: #FFCA28;
  --color-secondary-500: #FFC107;
  --color-secondary-600: #FFB300;
  --color-secondary-700: #C97E0A;
  --color-secondary-800: #92400E;
  --color-secondary-900: #78350F;

  /* ── Color scale: Neutrals (warm stone) ── */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-25:  #FAFAF9;
  --color-neutral-50:  #F5F5F3;
  --color-neutral-100: #EFEFEC;
  --color-neutral-200: #E8E8E6;
  --color-neutral-300: #D5D5D2;
  --color-neutral-400: #AAAAAA;
  --color-neutral-500: #767676;  /* min WCAG AA on white */
  --color-neutral-600: #5A5A58;
  --color-neutral-700: #4A4A4A;
  --color-neutral-800: #2D2D2D;
  --color-neutral-900: #1A1A1A;
  --color-neutral-950: #111111;

  /* ── Semantic: Success ── */
  --color-success-bg:     #E8F5E9;
  --color-success-border: #A5D6A7;
  --color-success-text:   #1D551E;
  --color-success-icon:   #388E3C;

  /* ── Semantic: Warning ── */
  --color-warning-bg:     #FFF8E1;
  --color-warning-border: #FFE082;
  --color-warning-text:   #92400E;
  --color-warning-icon:   #F59E0B;

  /* ── Semantic: Error ── */
  --color-error-bg:     #FEF2F2;
  --color-error-border: #FECACA;
  --color-error-text:   #B91C1C;
  --color-error-icon:   #EF4444;

  /* ── Semantic: Info ── */
  --color-info-bg:     #EFF6FF;
  --color-info-border: #BFDBFE;
  --color-info-text:   #1D4ED8;
  --color-info-icon:   #3B82F6;

  /* ── Legacy brand aliases (rétrocompatibilité) ── */
  --g:         var(--color-primary-700);
  --g-dark:    var(--color-primary-800);
  --g-mid:     var(--color-primary-600);
  --g-light:   var(--color-primary-50);
  --g-lighter: var(--color-primary-25);
  --white:     var(--color-neutral-0);
  --bg:        var(--color-neutral-50);
  --border:    var(--color-neutral-200);
  --border2:   var(--color-neutral-300);
  --text:      var(--color-neutral-950);
  --text2:     var(--color-neutral-700);
  --text3:     var(--color-neutral-500);
  --text4:     var(--color-neutral-400);

  /* ══════════════════════════════════════════
     TYPOGRAPHIE
     ══════════════════════════════════════════ */

  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font:         var(--font-body); /* alias */

  /* Tailles */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   20px;
  --text-3xl:   24px;
  --text-4xl:   28px;
  --text-5xl:   36px;
  --text-6xl:   48px;

  /* Graisses */
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

  /* Interlignes */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Espacements lettres */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* ══════════════════════════════════════════
     ESPACEMENT (base 4px)
     ══════════════════════════════════════════ */

  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ══════════════════════════════════════════
     RAYONS DE BORDURE
     ══════════════════════════════════════════ */

  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;
  --radius:      var(--radius-base); /* alias */

  /* ══════════════════════════════════════════
     OMBRES
     ══════════════════════════════════════════ */

  --shadow-xs:    0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 20px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg:    0 10px 40px rgba(0,0,0,.13), 0 4px 10px rgba(0,0,0,.07);
  --shadow-xl:    0 20px 60px rgba(0,0,0,.20), 0 8px 20px rgba(0,0,0,.10);
  --shadow-inner: inset 0 1px 3px rgba(0,0,0,.07);
  --shadow-brand: 0 4px 14px rgba(29,85,30,.25);
  --shadow:       var(--shadow-sm);  /* alias */
  --shadow2:      var(--shadow-md);  /* alias */

  /* ══════════════════════════════════════════
     TRANSITIONS
     ══════════════════════════════════════════ */

  --transition-fast:   100ms ease-out;
  --transition-base:   150ms ease-out;
  --transition-slow:   200ms ease-out;
  --transition-spring: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ══════════════════════════════════════════
     Z-INDEX
     ══════════════════════════════════════════ */

  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-modal:    1000;
  --z-toast:    1100;
  --header-h:   88px;
}
html { overflow-x: hidden; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font); }