/* ════════════════════════════════════════════════════════════════
   GESTIBAR — SYSTÈME DE TOKENS (site vitrine)
   Source : GestiBar/assets/styles/theme.css
   Sombre par défaut · Clair via [data-theme="light"]
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ───────── COUCHE 1 — PRIMITIVES ───────── */
:root {
  --blue-300: #66B0FF;
  --blue-400: #3E97FF;
  --blue-500: #2E8BFF;
  --blue-600: #1F74E8;
  --blue-700: #1655A8;
  --cyan-400: #2FD6E0;
  --cyan-600: #157F86;
  --green-400: #3FD69B;
  --green-600: #1E9E73;
  --red-400: #FF6B6B;
  --red-600: #D9534F;
  --amber-400: #FFC15E;
  --amber-600: #C98A1E;
  --n-0: #0A0E14;
  --n-50: #0F141C;
  --n-100: #141A24;
  --n-150: #19212D;
  --n-200: #222C3A;
  --n-400: #576475;
  --n-500: #6B7A8D;
  --n-600: #8493A6;
  --n-700: #A9B6C6;
  --n-900: #EEF3F8;

  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'DM Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-num: var(--f-mono);

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --shadow-card: 0 18px 40px -22px rgba(0, 0, 0, .85);
  --ring-focus: 0 0 0 3px rgba(46, 139, 255, .45);
  --sb-w: 250px;

  /* Site vitrine — garniture éditoriale uniquement */
  --accent-warm: var(--amber-400);
}

/* ───────── COUCHE 2 — SÉMANTIQUES · SOMBRE ───────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--n-0);
  --surface: var(--n-100);
  --surface-2: var(--n-150);
  --surface-3: var(--n-200);
  --border: rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .12);

  --text: var(--n-900);
  --text-dim: var(--n-600);
  --text-faint: #7A8A9D;

  --accent: var(--blue-500);
  --accent-hover: var(--blue-400);
  --accent-weak: rgba(46, 139, 255, .14);
  --on-accent: #04122B;
  --secondary: var(--cyan-400);

  --ok: var(--green-400);
  --ok-weak: rgba(63, 214, 155, .13);
  --err: var(--red-400);
  --err-weak: rgba(255, 107, 107, .13);
  --warn: var(--amber-400);
  --warn-weak: rgba(255, 193, 94, .14);

  --glow: radial-gradient(820px 480px at 82% -10%, rgba(46, 139, 255, .15), transparent 60%),
    radial-gradient(640px 560px at 102% 104%, rgba(47, 214, 224, .09), transparent 55%);

  --gb-sidebar: var(--n-50);
}

/* ───────── COUCHE 2bis — SÉMANTIQUES · CLAIR ───────── */
[data-theme="light"] {
  color-scheme: light;

  --bg: #EEF2F8;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #F1F4F9;
  --border: rgba(20, 30, 48, .09);
  --border-strong: rgba(20, 30, 48, .16);

  --text: #16202E;
  --text-dim: #5C6B7E;
  --text-faint: #69788A;

  --accent: var(--blue-600);
  --accent-hover: var(--blue-500);
  --accent-weak: rgba(31, 116, 232, .10);
  --on-accent: #FFFFFF;
  --secondary: #0FA9B8;

  --ok: #168F60;
  --ok-weak: rgba(19, 163, 107, .10);
  --err: #C9433F;
  --err-weak: rgba(224, 75, 75, .10);
  --warn: #A9711A;
  --warn-weak: rgba(224, 138, 30, .12);

  --shadow-card: 0 12px 30px -18px rgba(20, 40, 80, .30);
  --glow: radial-gradient(820px 480px at 82% -12%, rgba(31, 116, 232, .10), transparent 60%),
    radial-gradient(640px 560px at 102% 104%, rgba(15, 169, 184, .08), transparent 55%);

  --gb-sidebar: #F8FAFC;
}

/* ───────── COUCHE 3 — COMPOSANTS (tokens) ───────── */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --btn-primary-bg: var(--accent);
  --btn-primary-hover: var(--accent-hover);
  --btn-primary-fg: var(--on-accent);
  --card-bg: var(--surface);
  --card-border: var(--border);
  --nav-height: 64px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-body);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; display: block; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}

/* ───────── BOUTON CTA (bleu uniquement) ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s, transform .18s, box-shadow .18s, color .18s;
  text-decoration: none;
}

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}

.btn--primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-fg);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.btn--lg { padding: 14px 28px; font-size: 1rem; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: .82rem; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
}

[data-theme="light"] .btn--ghost:hover {
  background: rgba(20, 30, 48, .04);
}

/* ───────── CARTES ───────── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .card {
  background: var(--surface);
}