/* ============================================================
   ece — Quincaillerie Pro · DESIGN TOKENS
   Source de vérité unique (DESIGN.md). Clair/sombre via [data-theme], RTL via [dir].
   ============================================================ */

/* ---------- TOKENS : LIGHT (défaut) ---------- */
:root {
  /* Brand */
  --primary:#FF6B35; --primary-hover:#E8551F; --primary-pressed:#C84514; --on-primary:#FFFFFF;
  --primary-container:#FFE3D6; --on-primary-container:#5A1F00;
  --secondary:#1E3A8A; --secondary-hover:#1B3274; --on-secondary:#FFFFFF;
  --secondary-container:#DBE3F8; --on-secondary-container:#0B1F4A;
  --tertiary:#0D9488; --on-tertiary:#FFFFFF; --tertiary-container:#CCEEEA;
  /* Sémantiques */
  --success:#15803D; --on-success:#FFFFFF; --success-container:#D6F0DE;
  --warning:#B45309; --on-warning:#FFFFFF; --warning-container:#FCE9C8;
  --error:#DC2626; --on-error:#FFFFFF; --error-container:#FEE2E2;
  --info:#2563EB; --star:#F59E0B;
  /* Surfaces (light) */
  --bg:#FFFFFF; --on-bg:#15191F;
  --surface:#FFFFFF; --surface-dim:#F4F5F7;
  --surface-low:#F8F9FB; --surface-cont:#F2F4F7; --surface-high:#ECEFF3; --surface-highest:#E5E9EE;
  --on-surface:#15191F; --on-surface-variant:#5A6472;
  --outline:#D4D9E0; --outline-variant:#E5E9EE; --surface-tint:#FF6B35;
  /* Polices */
  --font-display:'Sora','Cairo',system-ui,sans-serif;
  --font-body:'Inter','Cairo',system-ui,sans-serif;
  /* Arrondis */
  --r-sm:6px; --r:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-full:9999px;
  /* Espacement */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
  --gutter:24px; --margin-m:16px; --margin-d:40px; --container:1280px; --section-gap:64px;
  /* Élévation */
  --el-1:0 1px 2px rgba(20,25,31,.04),0 1px 3px rgba(20,25,31,.06);
  --el-2:0 4px 12px rgba(20,25,31,.08);
  --el-3:0 12px 32px rgba(20,25,31,.12);
  --el-sticky:0 4px 24px rgba(20,25,31,.10);
  --focus:#FF6B35;
  color-scheme:light;
}

/* ---------- TOKENS : DARK ---------- */
[data-theme="dark"] {
  --primary:#FF8A5C; --primary-hover:#FFB088; --primary-pressed:#C44A1A; --on-primary:#4A1A00;
  --primary-container:#C44A1A; --on-primary-container:#FFE3D6;
  --secondary:#A5B8F0; --on-secondary:#0B1F4A; --secondary-container:#2A3F7A; --on-secondary-container:#DBE3F8;
  --tertiary:#5EC9BD; --on-tertiary:#00322E;
  --success:#4ADE80; --warning:#FBBF24; --error:#F87171; --info:#60A5FA; --star:#FBBF24;
  --bg:#0F1216; --on-bg:#E8EBF0;
  --surface:#15191F; --surface-dim:#0F1216;
  --surface-low:#15191F; --surface-cont:#1A1F26; --surface-high:#232932; --surface-highest:#2C333D;
  --on-surface:#E8EBF0; --on-surface-variant:#A0AAB8;
  --outline:#3A414C; --outline-variant:#2C333D; --surface-tint:#FF8A5C;
  --el-1:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4);
  --el-2:0 4px 12px rgba(0,0,0,.5);
  --el-3:0 12px 32px rgba(0,0,0,.55);
  --el-sticky:0 4px 24px rgba(0,0,0,.6);
  --focus:#FF8A5C;
  color-scheme:dark;
}

/* ---------- RTL : police arabe ---------- */
[dir="rtl"] {
  --font-display:'Cairo','Sora',system-ui,sans-serif;
  --font-body:'Cairo','Inter',system-ui,sans-serif;
}