/* ============================================================
   Carnet de Bord · Escale — Design tokens
   Architecture 3 couches : primitives → sémantiques → composants
   Deux thèmes : "dusk" (spa au crépuscule) · "lagoon" (lagon clair)
   ============================================================ */

/* ---------- Polices auto-hébergées (RGPD : aucun appel tiers) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/karla-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/karla-italic.woff2') format('woff2');
}

:root {
  /* ---------- Couche 1 : primitives ---------- */
  --eucalyptus-950: #0b1714;
  --eucalyptus-900: #0e1f1a;
  --eucalyptus-800: #143029;
  --sage-300: #a9c9b4;
  --sage-400: #8fb99e;
  --sand-200: #efdfc2;
  --sand-300: #e6cda1;
  --sand-400: #d9b98c;
  --sand-600: #a8823f;
  --linen-50: #faf6ec;
  --linen-100: #f3edde;
  --linen-200: #e9e0cb;
  --teal-900: #14312b;
  --teal-800: #1d443c;
  --teal-600: #2e7d6e;
  --terracotta-300: #eb927b;
  --terracotta-400: #e2775f;
  --terracotta-600: #b04a31;
  --amber-300: #e8b678;
  --amber-600: #8a5f22;
  --mist-100: #eef2ec;
  --mist-300: #c4d2c7;
  --mist-500: #9db3a6;

  /* ---------- Rythme, formes, mouvement (communs) ---------- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Karla', 'Segoe UI', sans-serif;
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --ease-drift: cubic-bezier(0.33, 1, 0.4, 1);
  --dur-micro: 200ms;
  --dur-slide: 520ms;
  --dur-breath: 9s;
}

/* ---------- Couche 2 : sémantiques — thème CRÉPUSCULE (sombre) ---------- */
:root,
:root[data-theme='dusk'] {
  color-scheme: dark;

  --bg: var(--eucalyptus-900);
  --bg-deep: var(--eucalyptus-950);
  --halo-1: rgba(143, 185, 158, 0.16);
  --halo-2: rgba(217, 185, 140, 0.11);

  --surface: rgba(238, 242, 236, 0.055);
  --surface-raised: rgba(238, 242, 236, 0.09);
  --line: rgba(238, 242, 236, 0.12);
  --line-strong: rgba(238, 242, 236, 0.22);

  --text: var(--mist-100);
  --text-soft: var(--mist-500);
  --text-display: var(--sand-200);

  --accent: var(--sand-400);
  --accent-strong: var(--sand-300);
  --accent-ink: #201505;
  --calm: var(--sage-400);
  --calm-soft: rgba(143, 185, 158, 0.16);
  --energy: var(--amber-300);
  --energy-soft: rgba(232, 182, 120, 0.14);

  --danger: var(--terracotta-400);
  --danger-soft: rgba(226, 119, 95, 0.16);
  --warn: var(--amber-300);
  --warn-soft: rgba(232, 182, 120, 0.15);

  --scrim: rgba(11, 23, 20, 0.55);
  --shadow-card: 0 20px 50px -24px rgba(0, 0, 0, 0.55);

  /* Logo galets : anneau sable sur fond sombre */
  --logo-ring: var(--sand-400);
}

/* ---------- Couche 2 : sémantiques — thème LAGON (clair) ---------- */
:root[data-theme='lagoon'] {
  color-scheme: light;

  --bg: var(--linen-100);
  --bg-deep: var(--linen-50);
  --halo-1: rgba(46, 125, 110, 0.14);
  --halo-2: rgba(217, 185, 140, 0.22);

  --surface: rgba(255, 253, 247, 0.62);
  --surface-raised: rgba(255, 253, 247, 0.88);
  --line: rgba(29, 68, 60, 0.13);
  --line-strong: rgba(29, 68, 60, 0.28);

  --text: var(--teal-900);
  --text-soft: #5d7a70;
  --text-display: var(--teal-800);

  --accent: var(--teal-600);
  --accent-strong: #256b5e;
  --accent-ink: #f6fbf7;
  --calm: var(--teal-600);
  --calm-soft: rgba(46, 125, 110, 0.13);
  --energy: var(--sand-600);
  --energy-soft: rgba(168, 130, 63, 0.14);

  --danger: var(--terracotta-600);
  --danger-soft: rgba(176, 74, 49, 0.12);
  --warn: var(--amber-600);
  --warn-soft: rgba(138, 95, 34, 0.12);

  --scrim: rgba(20, 49, 43, 0.35);
  --shadow-card: 0 18px 44px -26px rgba(29, 68, 60, 0.38);

  /* Logo galets : anneau sarcelle profond sur fond clair */
  --logo-ring: #175450;
}

/* ---------- Couche 3 : composants ---------- */
:root {
  --card-bg: var(--surface);
  --card-border: var(--line);
  --card-radius: var(--radius-l);
  --card-blur: 18px;

  --dock-bg: var(--surface-raised);
  --dock-item-size: 56px;

  --input-bg: var(--surface);
  --input-border: var(--line-strong);
  --input-radius: var(--radius-s);

  --flag-radius: 999px;
}