/* ==========================================================================
   GestPlan · Design Tokens
   --------------------------------------------------------------------------
   Variables, polices et utilitaires typographiques du design system GestPlan.
   À importer AVANT gestplan-components.css et avant les CSS applicatifs.
   CSS natif — aucune dépendance.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Fonts (Inter + JetBrains Mono)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------------
   2 · Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* — Neutres (encre) — */
  --ink:     #0b1220;
  --ink-2:   #1a2538;
  --ink-3:   #475569;
  --ink-4:   #94a3b8;
  --ink-5:   #cbd5e1;

  /* — Séparateurs — */
  --line:    #e6eaf0;
  --line-2:  #eef1f6;

  /* — Surfaces — */
  --surface: #ffffff;
  --bg:      #f4f6fa;
  --bg-2:    #eef1f6;

  /* — Brand bleu — */
  --blue:      #0d4a7a;
  --blue-600:  #0a5d9c;
  --blue-500:  #1a7fc9;
  --blue-100:  #d6e7f5;
  --blue-50:   #eaf3fb;

  /* — Accent orange — */
  --accent:    #ff7a3d;
  --accent-50: #fff1e8;

  /* — Statuts — */
  --green:     #0f9d58;
  --green-50:  #e7f6ed;
  --amber:     #d08400;
  --amber-50:  #fff5dd;
  --red:       #d92d20;
  --red-50:    #fdecec;
  --purple:    #6b4fdb;
  --purple-50: #eee9fc;

  /* — Rayons — */
  --r-sm:  6px;
  --r:     10px;
  --r-lg:  14px;
  --r-xl:  20px;

  /* — Ombres — */
  --shadow-xs: 0 1px 2px rgba(13,24,40,.06);
  --shadow-sm: 0 2px 6px rgba(13,24,40,.07), 0 1px 2px rgba(13,24,40,.04);
  --shadow-md: 0 8px 20px -6px rgba(13,24,40,.12), 0 2px 6px rgba(13,24,40,.06);
  --shadow-lg: 0 24px 44px -20px rgba(13,24,40,.22);

  /* — Espacement 4px step — */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  36px;
  --sp-10: 40px;
  --sp-11: 48px;
  --sp-12: 56px;
  --sp-13: 64px;
  --sp-14: 80px;

  /* — Transitions — */
  --t-fast: 120ms ease-out;
  --t:      180ms ease-out;

  /* — Échelle z-index (documentée pour cohabiter avec Leaflet) — */
  --z-inner:     10;     /* éléments internes de cartes */
  --z-sticky:    100;    /* header / topbar sticky */
  --z-bottomnav: 120;    /* bottom nav mobile */
  --z-fab:       150;    /* FAB */
  --z-dropdown:  400;    /* menus popover, tooltips */
  --z-leaflet:   1000;   /* rappel : Leaflet occupe jusqu'à ~1000 */
  --z-overlay:   1200;   /* overlays, bottom-sheets */
  --z-modal:     1300;   /* modales */
  --z-login:     1400;   /* écran de login plein écran */

  /* — Focus ring — */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue-500);

  /* — Safe-area (shortcut) — */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* --------------------------------------------------------------------------
   3 · Classes utilitaires typographiques
   -------------------------------------------------------------------------- */
.gp-display {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.gp-title-section {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.gp-title-card {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.gp-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}

.gp-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.gp-micro {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-3);
}

.gp-mono {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}