/* ==========================================================================
   ATELIBOX DESIGN SYSTEM — THEME TOKENS
   Version: 1.0.0
   ========================================================================== */
:root {
  /* 1. PALETTE BRAND (TERRACOTTA ARTISAN) */
  --color-brand-50: #FDF6F0;   --color-brand-50-oklch: oklch(0.975 0.015 48.0);
  --color-brand-100: #F9E8DC;  --color-brand-100-oklch: oklch(0.935 0.035 47.5);
  --color-brand-200: #F3CEB6;  --color-brand-200-oklch: oklch(0.865 0.065 47.0);
  --color-brand-300: #EAA986;  --color-brand-300-oklch: oklch(0.775 0.105 46.5);
  --color-brand-400: #DF8053;  --color-brand-400-oklch: oklch(0.680 0.145 45.8);
  --color-brand-500: #D35C27; /* Master Brand */
  --color-brand-500-oklch: oklch(0.605 0.175 44.5);
  --color-brand-600: #B9491A;  --color-brand-600-oklch: oklch(0.535 0.165 43.5);
  --color-brand-700: #963814;  --color-brand-700-oklch: oklch(0.455 0.145 42.0);
  --color-brand-800: #772D13;  --color-brand-800-oklch: oklch(0.380 0.118 41.0);
  --color-brand-900: #58210F;  --color-brand-900-oklch: oklch(0.300 0.088 39.5);

  /* 2. COULEURS D'ACCENT */
  /* Accent 1: Laiton Brossé / Cuivre */
  --color-brass-light: #FDF4E3; --color-brass-light-oklch: oklch(0.965 0.030 85.0);
  --color-brass-base: #C88D2B;  --color-brass-base-oklch: oklch(0.680 0.135 80.0);
  --color-brass-dark: #875B10;  --color-brass-dark-oklch: oklch(0.480 0.115 78.0);
  /* Accent 2: Ardoise Minérale */
  --color-slate-light: #EDF2F7; --color-slate-light-oklch: oklch(0.950 0.012 240.0);
  --color-slate-base: #4A5F78;  --color-slate-base-oklch: oklch(0.510 0.055 242.0);
  --color-slate-dark: #223142;  --color-slate-dark-oklch: oklch(0.320 0.045 245.0);

  /* 3. GRIS NEUTRES (CHAUX ET CIMENT CHAUD) */
  --color-neutral-50: #FAF8F5;  --color-neutral-50-oklch: oklch(0.980 0.005 60.0);
  --color-neutral-100: #F3EFE9; --color-neutral-100-oklch: oklch(0.950 0.008 60.0);
  --color-neutral-200: #E7E1D8; --color-neutral-200-oklch: oklch(0.905 0.012 60.0);
  --color-neutral-300: #D6CEBF; --color-neutral-300-oklch: oklch(0.840 0.018 60.0);
  --color-neutral-400: #ADA291; --color-neutral-400-oklch: oklch(0.700 0.022 60.0);
  --color-neutral-500: #7D7263; --color-neutral-500-oklch: oklch(0.550 0.024 60.0);
  --color-neutral-600: #605649; --color-neutral-600-oklch: oklch(0.450 0.022 60.0);
  --color-neutral-700: #453E34; --color-neutral-700-oklch: oklch(0.360 0.018 60.0);
  --color-neutral-800: #2E2822; --color-neutral-800-oklch: oklch(0.270 0.014 60.0);
  --color-neutral-900: #1A1612; --color-neutral-900-oklch: oklch(0.180 0.010 60.0);

  /* 4. COULEURS SÉMANTIQUES */
  --color-success-light: #ECFDF3; --color-success-light-oklch: oklch(0.975 0.030 145.0);
  --color-success-base: #16894E;  --color-success-base-oklch: oklch(0.580 0.150 145.0);
  --color-success-dark: #0E5832;  --color-success-dark-oklch: oklch(0.400 0.130 145.0);
  --color-warning-light: #FFF8E6; --color-warning-light-oklch: oklch(0.975 0.040 80.0);
  --color-warning-base: #C87808;  --color-warning-base-oklch: oklch(0.630 0.160 75.0);
  --color-warning-dark: #7E4902;  --color-warning-dark-oklch: oklch(0.420 0.140 70.0);
  --color-danger-light: #FEF3F2;  --color-danger-light-oklch: oklch(0.970 0.030 28.0);
  --color-danger-base: #D92D20;   --color-danger-base-oklch: oklch(0.550 0.220 28.0);
  --color-danger-dark: #7A140D;   --color-danger-dark-oklch: oklch(0.350 0.170 28.0);
  --color-info-light: #EFF8FF;    --color-info-light-oklch: oklch(0.970 0.020 230.0);
  --color-info-base: #1774B8;     --color-info-base-oklch: oklch(0.560 0.140 230.0);
  --color-info-dark: #0B4773;     --color-info-dark-oklch: oklch(0.380 0.120 230.0);

  /* 5. TOKENS DE SURFACE & TEXTE (LIGHT MODE DEFAULT) */
  --bg-app: var(--color-neutral-50);
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --border-subtle: var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);
  --text-main: var(--color-neutral-800);
  --text-muted: #6B6054;                    /* a11y #64 : 5.8:1 sur fond app (neutral-500 : 4.44:1) */
  --text-inverted: #FFFFFF;
  --text-body: var(--color-neutral-700);    /* notes d'implémentation n°5 */
  --text-heading: var(--color-neutral-800);
  --focus-ring: 0 0 0 3px rgba(211, 92, 39, 0.35);

  /* 6. TYPOGRAPHIE */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-numbers: 'Plus Jakarta Sans', var(--font-body);
  --font-size-display: 2.25rem; /* 36px */
  --font-size-h1: 2.25rem;      /* 36px */
  --font-size-h2: 1.75rem;      /* 28px */
  --font-size-h3: 1.375rem;     /* 22px */
  --font-size-h4: 1.125rem;     /* 18px */
  --font-size-h5: 1.0rem;       /* 16px */
  --font-size-body-lg: 1.125rem;  /* 18px */
  --font-size-body: 0.9375rem;    /* 15px */
  --font-size-body-sm: 0.8125rem; /* 13px */
  --font-size-caption: 0.75rem;   /* 12px */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-heading: 1.3;
  --line-height-body: 1.5;

  /* 7. ESPACEMENTS (BASE 4PX) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1.0rem;   /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2.0rem;   /* 32px */
  --space-12: 3.0rem;  /* 48px */
  --space-16: 4.0rem;  /* 64px */
  --space-24: 6.0rem;  /* 96px */
  --space-32: 8.0rem;  /* 128px */

  /* 8. RAYONS DE COURBURE & ÉLÉVATION (SHADOWS) */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(46, 40, 34, 0.05);
  --shadow-md: 0 4px 8px -1px rgba(46, 40, 34, 0.08), 0 2px 4px -2px rgba(46, 40, 34, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(46, 40, 34, 0.10), 0 4px 6px -2px rgba(46, 40, 34, 0.04);
  --shadow-brand: 0 4px 14px rgba(211, 92, 39, 0.28);

  /* 9. ANIMATIONS & TRANSITIONS */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-deliberate: 350ms;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* sorties : modales, drawers, toasts (notes d'implémentation n°4) */
}

/* ==========================================================================
   DARK MODE ("L'ATELIER DE NUIT")
   ========================================================================== */
[data-theme='dark'], .dark {
  --bg-app: #141210;
  --bg-surface: #1E1B18;
  --bg-surface-elevated: #282420;
  --border-subtle: #36302A;
  --border-strong: #453E34;
  --text-main: #F3EFE9;
  --text-muted: #ADA291;
  --text-inverted: #141210;
  --text-body: #D6CEBF;
  --text-heading: #F3EFE9;
  /* Brand éclairci pour contraste sur fond noir */
  --color-brand-500: #DF8053;
  --color-brand-600: #EAA986;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 14px 28px rgba(0, 0, 0, 0.5);
}