/* ============================================================
   base.css — Design tokens, reset, typography
   Loaded on every page via Page::displayHeader()
   ============================================================ */

/* ── Polices auto-hébergées (fonts/, licence OFL) ───────────
   Copie de ce que servait Google Fonts, sous-ensembles latin et
   latin-ext seulement : le navigateur ne télécharge latin-ext que
   si la page contient un caractère de sa plage (unicode-range).
   Les deux familles sont des polices variables : Bricolage
   Grotesque couvre 200 à 800 en un seul bloc ; Montserrat garde
   un bloc par graisse chargée (400, 600, 700, 800) sur le même
   fichier, pour que les graisses intermédiaires (500…) se
   rabattent comme avant au lieu d'être rendues exactement.
   Les fichiers latin sont préchargés par Page::displayHeader(). */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-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;
}

:root {

  /* ── Primitive palette ──────────────────────────────────── */

  /* Blues */
  --blue-50:  #e8f0fa;
  --blue-100: #d1e2f5;
  --blue-200: #a3c5ec;
  --blue-300: #76a8e2;
  --blue-400: #4d8ed9;
  --blue-500: #0066cc;
  --blue-600: #0052a3;
  --blue-700: #003d7a;

  /* Greens — brand / landing */
  --green-50:  #edf4ef;
  --green-100: #cfe2d4;
  --green-300: #88b594;
  --green-500: #3d6b47;
  --green-700: #2a4d33;

  /* Greys */
  --grey-0:   #ffffff;
  --grey-25:  #fbfbfd;
  --grey-50:  #f6f7f9;
  --grey-100: #eceef2;
  --grey-200: #dfe2e8;
  --grey-300: #c4c9d2;
  --grey-400: #9aa1ad;
  --grey-500: #6b7280;
  --grey-600: #4a5160;
  --grey-700: #2f3540;
  --grey-800: #1c2029;
  --grey-900: #0f1218;

  /* Reds — danger */
  --red-50:  #fdecec;
  --red-100: #f9c9c9;
  --red-500: #d33030;
  --red-700: #962121;

  /* Ambers — warning */
  --amber-50:  #fff8e1;
  --amber-100: #ffecb3;
  --amber-500: #b78104;
  --amber-700: #855e02;

  /* Greens (semantic) — success */
  --success-50:  #e7f5ec;
  --success-100: #c5e6d0;
  --success-500: #1f8b4c;
  --success-700: #16683a;

  /* Cyans — info */
  --cyan-50:  #e6f4f8;
  --cyan-500: #0a7da3;
  --cyan-700: #07607c;

  /* ── Semantic tokens ────────────────────────────────────── */

  /* Surfaces & text */
  --color-bg:              var(--grey-25);
  --color-surface:         var(--grey-0);
  --color-surface-alt:     var(--grey-50);
  --color-surface-sunken:  var(--grey-100);
  --color-border:          var(--grey-200);
  --color-border-strong:   var(--grey-300);
  --color-text:            var(--grey-800);
  --color-text-muted:      var(--grey-500);
  --color-text-soft:       var(--grey-400);
  --color-text-inverse:    var(--grey-0);

  /* Primary (admin) */
  --color-primary:         var(--blue-500);
  --color-primary-hover:   var(--blue-600);
  --color-primary-active:  var(--blue-700);
  --color-primary-light:   var(--blue-50);
  --color-primary-fg:      var(--grey-0);

  /* Brand (landing / marketing only) */
  --color-brand:           var(--green-500);
  --color-brand-hover:     var(--green-700);
  --color-brand-light:     var(--green-50);
  --color-brand-fg:        var(--grey-0);

  /* Status */
  --color-danger:          var(--red-500);
  --color-danger-bg:       var(--red-50);
  --color-danger-border:   var(--red-100);
  --color-warning:         var(--amber-500);
  --color-warning-bg:      var(--amber-50);
  --color-warning-border:  var(--amber-100);
  --color-success:         var(--success-500);
  --color-success-bg:      var(--success-50);
  --color-success-border:  var(--success-100);
  --color-info:            var(--cyan-500);
  --color-info-bg:         var(--cyan-50);
  --color-info-border:     var(--grey-100);

  /* ── Palette tonale ─────────────────────────────────────── */
  /* Aplats désaturés partagés par les tuiles d'action et les alertes du
     dashboard. Chaque famille : fond, fond survolé, texte, texte secondaire,
     puis aplat plein + survol pour les boutons.
     Tous les couples texte/fond sont vérifiés >= 4.5:1 (WCAG AA), y compris
     le texte secondaire posé sur le fond survolé. */

  --tonal-green-bg:          #e3eee6;
  --tonal-green-bg-hover:    #d7e6dc;
  --tonal-green-fg:          #2a4d33;
  --tonal-green-sub:         #4a6b53;
  --tonal-green-solid:       #3d6b47;
  --tonal-green-solid-hover: #2a4d33;

  --tonal-blue-bg:           #e5ebf5;
  --tonal-blue-bg-hover:     #d8e1f0;
  --tonal-blue-fg:           #2a4470;
  --tonal-blue-sub:          #4d5f84;
  --tonal-blue-solid:        #3b5d9e;
  --tonal-blue-solid-hover:  #314e85;

  --tonal-sand-bg:           #f4ecda;
  --tonal-sand-bg-hover:     #eee2c6;
  --tonal-sand-fg:           #78530b;
  --tonal-sand-sub:          #745c2c;
  --tonal-sand-solid:        #8a6410;
  --tonal-sand-solid-hover:  #6f5009;

  --tonal-red-bg:            #f6e6e3;
  --tonal-red-bg-hover:      #efd6d1;
  --tonal-red-fg:            #7a2a1e;
  --tonal-red-sub:           #8c4a3c;
  --tonal-red-solid:         #a8392a;
  --tonal-red-solid-hover:   #8c2d20;

  --tonal-grey-bg:           #ecefe9;
  --tonal-grey-bg-hover:     #e2e6de;
  --tonal-grey-fg:           #3d453a;
  --tonal-grey-sub:          #5e6659;
  --tonal-grey-solid:        #4a5245;
  --tonal-grey-solid-hover:  #3d453a;

  /* Focus */
  --color-focus-ring:      rgba(0, 102, 204, 0.32);

  /* @deprecated — crimson-as-warning BC alias; see design-system.md §20 */
  --color-warning-legacy-crimson: crimson;

  /* ── Typography ─────────────────────────────────────────── */

  --font-base: 'Montserrat', system-ui, -apple-system, sans-serif;
  /* Police de titrage : h1-h3, labels de tuiles, titre de page (nav) */
  --font-display: 'Bricolage Grotesque', 'Montserrat', system-ui, sans-serif;
  --font-weight-display: 650;

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ── Spacing (4 px baseline grid) ───────────────────────── */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── Border radius ──────────────────────────────────────── */

  --radius-xs:     4px;
  --radius-sm:     6px;
  --radius-md:     8px;
  --radius-lg:    12px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ── Shadows ────────────────────────────────────────────── */

  --shadow-xs:    0 1px 2px rgba(15, 18, 24, 0.06);
  --shadow-sm:    0 1px 4px rgba(15, 18, 24, 0.08);
  --shadow-md:    0 4px 12px rgba(15, 18, 24, 0.10);
  --shadow-lg:    0 8px 24px rgba(15, 18, 24, 0.14);
  --shadow-xl:    0 16px 48px rgba(15, 18, 24, 0.18);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-inset: inset 0 1px 0 rgba(15, 18, 24, 0.04);

  /* ── Breakpoints ────────────────────────────────────────── */

  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

}

body, table, tr, td, form, input, textarea, select {
  font-family: var(--font-base);
  font-size: 14px;
}

hr {
  border-top: 1px solid silver;
}

a {
  color: var(--color-primary);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.005em;
}

h2 {
  font-size: 18px;
}