/* ============================================================
   GeoLeaf Suite — Design Tokens "Cartographie marine"
   CDC v2.0.0 §3.7 — Palette complète + typographie + tokens
   ============================================================ */

/* --- Fonts self-hosted — latin subset, WOFF2 variable, RGPD compliant --- */
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/sora-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  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: 'DM Sans';
  src: url('../assets/fonts/dm-sans-var.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  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: 'DM Sans';
  src: url('../assets/fonts/dm-sans-var-italic.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
  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: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  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;
}

/* --- Variables CSS — Cartographie marine --- */
:root {
  /* === MARQUE — Teal pétrole (primary) === */
  --color-primary-50:  #E8F1F2;
  --color-primary-100: #C5DDDF;
  --color-primary-200: #9ABEC2;
  --color-primary-300: #6FA0A5;
  --color-primary-400: #4E8B91;
  --color-primary-500: #2A737A;
  --color-primary-600: #0D5C63;
  --color-primary-700: #0A4A50;
  --color-primary-800: #08373B;
  --color-primary-900: #05282C;
  --color-primary:     var(--color-primary-600);

  /* === MARQUE — Corail (accent) === */
  --color-accent-50:  #FCEEEA;
  --color-accent-100: #F8D3C8;
  --color-accent-200: #F2B0A0;
  --color-accent-300: #ED8E77;
  --color-accent-400: #EA7E63;
  --color-accent-500: #E97A5C;
  --color-accent-600: #E76F51;
  --color-accent-700: #D45E40;
  --color-accent-800: #B04930;
  --color-accent-900: #8A3825;
  --color-accent:     var(--color-accent-600);

  /* === MARQUE — Teals carto clairs (scène iso + chips/sable) === */
  --color-teal-100: #C5E4E8;   /* carto clair */
  --color-teal-300: #7ABAC6;
  --color-sand:     #EFE7D6;   /* fond sable des sections */

  /* === NEUTRES — Sable / anthracite chaud === */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAF6EE;
  --color-neutral-100: #F2EBD9;
  --color-neutral-200: #E5DDC9;
  --color-neutral-300: #DDD3BC;
  --color-neutral-400: #C2B8A0;
  --color-neutral-500: #8E826A;
  --color-neutral-600: #5C5448;
  --color-neutral-700: #3F3A33;
  --color-neutral-800: #2A2823;
  --color-neutral-900: #1A1816;

  /* === COULEURS SÉMANTIQUES === */
  --color-success-bg:   #E8F2E3;
  --color-success:      #4A8B3A;
  --color-success-text: #2D5921;

  --color-warning-bg:   #FBF1DC;
  --color-warning:      #C58B1B;
  --color-warning-text: #6E4E0E;

  --color-danger-bg:    #F8E0DE;
  --color-danger:       #B8302E;
  --color-danger-text:  #7E1D1C;

  --color-info-bg:      #E5EFF6;
  --color-info:         #3470A5;
  --color-info-text:    #1F4669;

  /* === ALIAS D'USAGE === */
  --color-bg:            var(--color-neutral-50);
  --color-surface:       var(--color-neutral-0);
  --color-surface-alt:   var(--color-neutral-100);
  --color-text:          var(--color-neutral-800);
  --color-text-muted:    var(--color-neutral-600);
  --color-text-disabled: var(--color-neutral-500);
  --color-border:        var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-400);

  /* === ÉTATS INTERACTIFS === */
  --color-primary-hover:      var(--color-primary-700);
  --color-primary-active:     var(--color-primary-800);
  --color-primary-focus-ring: rgba(13, 92, 99, 0.35);
  --color-accent-hover:       var(--color-accent-700);
  --color-accent-active:      var(--color-accent-800);
  --color-accent-focus-ring:  rgba(231, 111, 81, 0.35);

  /* === TYPOGRAPHIE === */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Tailles (px → rem) */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   2rem;       /* 32px */
  --text-2xl:  2.75rem;    /* 44px */
  --text-3xl:  4rem;       /* 64px */

  /* Poids */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* Letter-spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  /* Line-height */
  --leading-tight: 1.18;
  --leading-body:  1.55;
  --leading-label: 1.4;

  /* === RADII === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* === ESPACEMENT (unité 8px) === */
  --space-unit: 8px;
  --space-1: calc(var(--space-unit) * 0.5);  /* 4px */
  --space-2: var(--space-unit);              /* 8px */
  --space-3: calc(var(--space-unit) * 1.5);  /* 12px */
  --space-4: calc(var(--space-unit) * 2);    /* 16px */
  --space-5: calc(var(--space-unit) * 2.5);  /* 20px */
  --space-6: calc(var(--space-unit) * 3);    /* 24px */
  --space-8: calc(var(--space-unit) * 4);    /* 32px */
  --space-10: calc(var(--space-unit) * 5);   /* 40px */
  --space-12: calc(var(--space-unit) * 6);   /* 48px */
  --space-16: calc(var(--space-unit) * 8);   /* 64px */
  --space-20: calc(var(--space-unit) * 10);  /* 80px */
  --space-24: calc(var(--space-unit) * 12);  /* 96px */

  /* === OMBRES === */
  --shadow-card:       0 1px 3px rgba(13, 92, 99, 0.06), 0 2px 8px rgba(13, 92, 99, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(13, 92, 99, 0.10), 0 8px 24px rgba(231, 111, 81, 0.08);
  --shadow-focus-ring: 0 0 0 3px rgba(13, 92, 99, 0.35);
  --shadow-sm:         0 1px 3px rgba(13, 92, 99, 0.08);
  --shadow-md:         0 4px 14px rgba(13, 92, 99, 0.12);
  --shadow-lg:         0 10px 30px rgba(13, 92, 99, 0.18);

  /* === Z-INDEX === */
  --z-base:     0;
  --z-above:    10;
  --z-sticky:   100;
  --z-fixed:    200;
  --z-overlay:  300;
  --z-modal:    400;

  /* === TRANSITIONS === */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease-out;

  /* === LAYOUT === */
  --max-width: 1280px;
  --header-height: 64px;

  /* === Aliases courts — page geoleaf_maintenance.html === */
  --teal-900: #062f34; --teal-800: #08434a; --teal-700: #0d5c63;
  --teal-600: #157880; --teal-300: #7abac6; --teal-100: #c5e4e8;
  --coral: #e76f51;    --coral-dark: #d2563b;
  --cream: #faf6ee;    --sand: #efe7d6;      --sand-2: #e6dac4;
  --ink: #16292b;      --ink-soft: #33484a;  --muted: #5e7173;  --plan: #8b8576;
  --line: rgba(13,92,99,.14);  --line-strong: rgba(13,92,99,.28);
  --ok: #3f8f5a;  --warn: #c98a1e;  --danger: #d93a3a;
  --r: 14px;  --r-lg: 22px;
  --display: 'Sora', sans-serif;
  --body: 'DM Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}