/* Jetons de design. Le bloc "Marque" est alimenté par /theme.css (configuration du client) et par
   core/theme.js pour les dérivés contrôlés en contraste. Les composants ne lisent jamais un hex. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BauhausBugler";
  src: url("/fonts/BauhausBugler-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marque */
  --brand: var(--marque-primaire, #40ba8d);
  --ink: var(--marque-sombre, #0a1828);
  --brand-on: var(--brand-on-calc, var(--ink));
  --brand-text: var(--brand-text-l, #17704f);
  --brand-soft: var(--brand-soft-l, #e6f5ef);
  --link: var(--link-l, #2f5a9e);
  --font-display: "BauhausBugler", "Inter", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-hover: color-mix(in oklab, var(--brand) 88%, #000);
  --brand-active: color-mix(in oklab, var(--brand) 78%, #000);

  /* Thème clair */
  --bg: #f6f8f9;
  --surface: #fff;
  --surface-2: #edf1f3;
  --text: var(--ink);
  --text-2: #4b5a6b;
  --text-3: #5b6878;
  --border: #dde3e8;
  --border-strong: #7c8794;
  --focus: #2f5a9e;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --warning: #7a4e00;
  --warning-soft: #fff4dc;
  --success: #17704f;
  --success-soft: #e6f5ef;
  --info: #2f5a9e;
  --info-soft: #e8eff9;
  --overlay: rgb(10 24 40 / 55%);
  --disabled-bg: #edf1f3;
  --disabled-text: #8b98a6;
  --shadow-1: 0 1px 2px rgb(10 24 40 / 4%), 0 6px 20px rgb(10 24 40 / 6%);
  --shadow-2: 0 2px 6px rgb(10 24 40 / 5%), 0 14px 32px rgb(10 24 40 / 10%);
  --shadow-pop: 0 8px 16px rgb(10 24 40 / 8%), 0 24px 56px rgb(10 24 40 / 18%);
  --glow-brand: 0 4px 16px color-mix(in srgb, var(--brand) 32%, transparent);
  --glow-brand-hover: 0 8px 24px color-mix(in srgb, var(--brand) 40%, transparent);

  /* Échelle */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 9999px;
  --h-sm: 36px;
  --h-md: 44px;
  --h-lg: 52px;

  /* Typographie */
  --fs-display: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h1: clamp(1.75rem, 1.5rem + 1vw, 2rem);
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;

  /* Mouvement */
  --dur-instant: 100ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-reveal: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Gabarit */
  --sidebar-w: 256px;
  --sidebar-rail-w: 72px;
  --topbar-h: 56px;
  --banner-h: 0px;
  --content-max: 1200px;
  --z-sidebar: 40;
  --z-topbar: 50;
  --z-demo: 60;
  --z-drawer: 70;
  --z-modal: 80;
  --z-toast: 90;

  color-scheme: light;
}

/* Thème sombre : jeu de jetons séparé, pas une inversion. */
:root[data-theme="dark"] {
  --brand-text: var(--brand-text-d, #40ba8d);
  --brand-soft: var(--brand-soft-d, #123a36);
  --link: var(--link-d, #7fa8e6);
  --bg: #0a1828;
  --surface: #0f2136;
  --surface-2: #152c46;
  --text: #e8eef3;
  --text-2: #a9b7c6;
  --text-3: #8fa0b2;
  --border: #1f3752;
  --border-strong: #6f87a5;
  --focus: #7fa8e6;
  --danger: #ff8a80;
  --danger-soft: #3a1620;
  --warning: #f2c14e;
  --warning-soft: #332710;
  --success: #40ba8d;
  --success-soft: #123a36;
  --info: #7fa8e6;
  --info-soft: #152c46;
  --overlay: rgb(3 9 16 / 70%);
  --disabled-bg: #152c46;
  --disabled-text: #5c7391;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 28%);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 34%), 0 14px 32px rgb(0 0 0 / 38%);
  --shadow-pop: 0 8px 16px rgb(0 0 0 / 40%), 0 24px 56px rgb(0 0 0 / 55%);
  --glow-brand: 0 4px 16px color-mix(in srgb, var(--brand) 22%, transparent);
  --glow-brand-hover: 0 8px 24px color-mix(in srgb, var(--brand) 30%, transparent);
  color-scheme: dark;
}