/* ==========================================================================
   Estafette : jetons de design
   Couleurs, typographie, espacements, rayons, ombres.
   Thème clair par défaut ; thème sombre selon la préférence du système,
   ou forcé par l'attribut data-theme="light|dark" sur <html>.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Marque */
  --petrol: #0E5566;
  --saffron: #F4A934;
  --ink: #0B2A33;
  --paper: #F5EFE4;

  /* Action principale */
  --primary: #0E5566;
  --primary-hover: #0B4756;
  --primary-fg: #FFFFFF;
  --primary-soft: #E2EEF0;
  --link: #0E5566;
  --focus: #1D7F95;

  /* Surfaces et texte */
  --bg: #F3F5F5;
  --surface: #FFFFFF;
  --surface-2: #F8FAFA;
  --surface-3: #EBF0F0;
  --fg: #142429;
  --fg-muted: #56676C;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356676C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --fg-subtle: #7A8A8E;
  --line: #DFE6E7;
  --line-soft: #ECF0F1;
  --line-strong: #C6D1D3;
  --overlay: rgba(6, 22, 27, 0.48);

  /* Barre latérale (identique dans les deux thèmes, pour ancrer la marque) */
  --side-bg: #0B2A33;
  --side-fg: #B9CDD1;
  --side-fg-strong: #F5EFE4;
  --side-muted: #6F8E95;
  --side-hover: rgba(245, 239, 228, 0.06);
  --side-active: rgba(245, 239, 228, 0.1);
  --side-line: rgba(245, 239, 228, 0.08);

  /* États (statuts des messages, alertes) */
  --ok: #2F8F5B;
  --ok-soft: #E4F3EA;
  --ok-fg: #1D6A41;
  --info: #1D7F95;
  --info-soft: #E1F0F4;
  --info-fg: #145E6F;
  --warn: #C9771C;
  --warn-soft: #FCF0DE;
  --warn-fg: #8A4E0B;
  --danger: #C8393F;
  --danger-soft: #FBE7E8;
  --danger-fg: #9C2329;
  --neutral: #7A8C91;
  --neutral-soft: #EBF0F1;
  --neutral-fg: #4C5F64;

  /* Typographie */
  --font-display: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* Espacements (pas de 4 px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Rayons et ombres */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 42, 51, 0.04);
  --shadow: 0 18px 48px rgba(11, 42, 51, 0.08);
  --shadow-lg: 0 16px 48px rgba(11, 42, 51, 0.24);

  /* Mise en page */
  --sidebar-width: 17rem;
  --topbar-height: 3.75rem;
  --content-max: 76rem;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primary: #1D7F95;
    --primary-hover: #238DA5;
    --primary-fg: #FFFFFF;
    --primary-soft: #12343D;
    --link: #6CC4D8;
    --focus: #4FB3C9;
    --bg: #0A1619;
    --surface: #10232A;
    --surface-2: #0D1D22;
    --surface-3: #17303A;
    --fg: #E3ECEE;
    --fg-muted: #95A9AD;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395A9AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --fg-subtle: #71868B;
    --line: #21383F;
    --line-soft: #1A2F35;
    --line-strong: #2F4B53;
    --overlay: rgba(0, 0, 0, 0.6);
    --side-bg: #071518;
    --ok: #45B07A;
    --ok-soft: rgba(69, 176, 122, 0.14);
    --ok-fg: #86D6AC;
    --info: #3BA7BF;
    --info-soft: rgba(59, 167, 191, 0.15);
    --info-fg: #8DD0E0;
    --warn: #E0912F;
    --warn-soft: rgba(224, 145, 47, 0.15);
    --warn-fg: #F2BE7C;
    --danger: #E0565C;
    --danger-soft: rgba(224, 86, 92, 0.15);
    --danger-fg: #F29A9E;
    --neutral: #8A9CA1;
    --neutral-soft: rgba(138, 156, 161, 0.14);
    --neutral-fg: #B7C5C9;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #1D7F95;
  --primary-hover: #238DA5;
  --primary-fg: #FFFFFF;
  --primary-soft: #12343D;
  --link: #6CC4D8;
  --focus: #4FB3C9;
  --bg: #0A1619;
  --surface: #10232A;
  --surface-2: #0D1D22;
  --surface-3: #17303A;
  --fg: #E3ECEE;
  --fg-muted: #95A9AD;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395A9AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --fg-subtle: #71868B;
  --line: #21383F;
  --line-soft: #1A2F35;
  --line-strong: #2F4B53;
  --overlay: rgba(0, 0, 0, 0.6);
  --side-bg: #071518;
  --ok: #45B07A;
  --ok-soft: rgba(69, 176, 122, 0.14);
  --ok-fg: #86D6AC;
  --info: #3BA7BF;
  --info-soft: rgba(59, 167, 191, 0.15);
  --info-fg: #8DD0E0;
  --warn: #E0912F;
  --warn-soft: rgba(224, 145, 47, 0.15);
  --warn-fg: #F2BE7C;
  --danger: #E0565C;
  --danger-soft: rgba(224, 86, 92, 0.15);
  --danger-fg: #F29A9E;
  --neutral: #8A9CA1;
  --neutral-soft: rgba(138, 156, 161, 0.14);
  --neutral-fg: #B7C5C9;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.7);
}