/* ==========================================================================
   Portail d'Administration - Tokens de Design Partagés
   Zéro ressource externe (CSP strict 'self')
   ========================================================================== */

:root {
  /* Palette Émeraude, Ardoise & Laiton */
  --bg-canvas: #eef3f1;
  --bg-canvas-grid: rgba(12, 107, 93, 0.042);
  --bg-surface: #ffffff;
  --bg-surface-alt: #f5f8f7;
  --bg-surface-hover: #ebf2ef;
  --bg-elevated: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.88);

  --bg-rail: #0a1d1b;
  --bg-rail-deep: #05100f;
  --rail-ink: #eff6f4;
  --rail-muted: #93b3ae;
  --rail-border: rgba(147, 179, 174, 0.16);
  --rail-active: rgba(44, 196, 170, 0.16);

  --ink: #0f1d1c;
  --ink-2: #2f4340;
  --ink-3: #5d726e;

  --line: #d6e1dd;
  --line-strong: #b4c7c0;

  --emerald: #0c6b5d;
  --emerald-hover: #095247;
  --emerald-soft: rgba(12, 107, 93, 0.10);
  --emerald-border: rgba(12, 107, 93, 0.28);

  /* Boutons primaires adaptatifs Light / Dark */
  --btn-primary-bg: linear-gradient(180deg, #107b6b 0%, #0b6054 100%);
  --btn-primary-hover: linear-gradient(180deg, #0d6c5e 0%, #084f45 100%);
  --btn-primary-border: #0a584c;
  --btn-primary-ink: #ffffff;
  --btn-primary-shadow: 0 4px 12px -4px rgba(12, 107, 93, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);

  --brass: #b88422;
  --brass-soft: rgba(184, 132, 34, 0.12);
  --clay: #b8422b;
  --cobalt: #165e82;
  --cobalt-soft: rgba(22, 94, 130, 0.10);
  --cobalt-border: rgba(22, 94, 130, 0.28);

  --ring: rgba(12, 107, 93, 0.22);

  /* Statuts */
  --ok: #0a7b56;
  --ok-bg: #eaf8f2;
  --ok-border: #8adab9;

  --warn: #9a640b;
  --warn-bg: #fdf6e7;
  --warn-border: #ebc77a;

  --err: #b63226;
  --err-bg: #fdf0ef;
  --err-border: #efa8a1;

  --code-bg: #081615;
  --code-header: #0d211f;
  --code-border: #1b3834;
  --code-text: #d8eae7;

  /* Liseré tricolore équilibré 1/3 • 1/3 • 1/3 */
  --seal-band: linear-gradient(
    90deg,
    #0e6b5d 0%,
    #0e6b5d 33.3333%,
    #b98322 33.3333%,
    #b98322 66.6667%,
    #b8422b 66.6667%,
    #b8422b 100%
  );

  /* Élévation mesurée */
  --shadow-xs: 0 1px 2px rgba(10, 29, 27, 0.04);
  --shadow-sm: 0 2px 6px -2px rgba(10, 29, 27, 0.06), 0 1px 2px rgba(10, 29, 27, 0.04);
  --shadow-md: 0 12px 28px -10px rgba(10, 29, 27, 0.12), 0 3px 8px -2px rgba(10, 29, 27, 0.05);
  --shadow-shell: 0 26px 60px -18px rgba(5, 16, 15, 0.24), 0 4px 16px -4px rgba(5, 16, 15, 0.08);

  /* Typographie distincte (Display géométrique + Labeur + Télémétrie) */
  --font-display: 'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'Cascadia Code', 'Cascadia Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --radius: 13px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Alias sémantiques pour les gabarits dynamiques */
  --surface: var(--bg-surface);
  --surface-alt: var(--bg-surface-alt);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --text: var(--ink);
  --text-secondary: var(--ink-2);
  --muted: var(--ink-3);
  --primary: var(--emerald);
  --accent: var(--cobalt);
  --mono: var(--font-mono);

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg-canvas: #071211;
  --bg-canvas-grid: rgba(44, 196, 170, 0.045);
  --bg-surface: #0d1e1c;
  --bg-surface-alt: #132825;
  --bg-surface-hover: #18322f;
  --bg-elevated: #122624;
  --header-bg: rgba(13, 30, 28, 0.86);

  --bg-rail: #050e0d;
  --bg-rail-deep: #020807;
  --rail-ink: #eaf4f2;
  --rail-muted: #7da19c;
  --rail-border: rgba(125, 161, 156, 0.16);
  --rail-active: rgba(44, 196, 170, 0.18);

  --ink: #edf5f3;
  --ink-2: #bfd2cf;
  --ink-3: #86a09c;

  --line: #1d3632;
  --line-strong: #2c4e48;

  --emerald: #30cbb1;
  --emerald-hover: #47ddc4;
  --emerald-soft: rgba(48, 203, 177, 0.14);
  --emerald-border: rgba(48, 203, 177, 0.34);

  --btn-primary-bg: linear-gradient(180deg, #189581 0%, #117565 100%);
  --btn-primary-hover: linear-gradient(180deg, #1fa992 0%, #158977 100%);
  --btn-primary-border: #25aa94;
  --btn-primary-ink: #ffffff;
  --btn-primary-shadow: 0 6px 16px -4px rgba(24, 149, 129, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);

  --brass: #e0b356;
  --brass-soft: rgba(224, 179, 86, 0.15);
  --clay: #e16c55;
  --cobalt: #5bb7df;
  --cobalt-soft: rgba(91, 183, 223, 0.14);
  --cobalt-border: rgba(91, 183, 223, 0.34);

  --ring: rgba(48, 203, 177, 0.28);

  --ok: #3ed5a1;
  --ok-bg: rgba(10, 123, 86, 0.20);
  --ok-border: rgba(62, 213, 161, 0.36);

  --warn: #f4c15d;
  --warn-bg: rgba(185, 131, 34, 0.20);
  --warn-border: rgba(244, 193, 93, 0.36);

  --err: #f47e70;
  --err-bg: rgba(182, 50, 38, 0.22);
  --err-border: rgba(244, 126, 112, 0.38);

  --code-bg: #040c0b;
  --code-header: #081413;
  --code-border: #17302c;
  --code-text: #d8eae7;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.26);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.34);
  --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.48);
  --shadow-shell: 0 28px 64px -18px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.05);

  color-scheme: dark;
}