/* Thèmes de vlan-router : couleurs, polices, arrondis et proportions de toute l'interface.
   app.css et les dessins (Topologie, faces avant, graphiques) ne lisent que ces variables.
   SWITCH Prod est le thème de base (:root) ; les autres ne redéfinissent que ce qui change, sur <html data-theme="…">.
   Un nouveau thème = un bloc [data-theme="nom"] ici + son nom dans THEMES (index.html) et config.THEMES. */
@font-face { font-family: "Bebas Neue"; src: url("/fonts/bebas.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }

/* --- SWITCH Prod (bleu nuit) ------------------------------------------------------------------ */
:root {
  color-scheme: dark;
  --bg: #071426;
  --side: 228px;           /* largeur de la barre latérale (ordinateur) */
  --bg-elevated: #0D2340;
  --bg-subtle: #122C50;
  --bg-input: #12243c;     /* champs, pistes de barres */
  --bg-menu: #102848;      /* menus déroulants, fenêtres */
  --bg-deep: #07111f;      /* zones encastrées (Grafana, listes) */
  --fg: #E8EEF7;
  --fg-muted: #7D91B0;
  --fg-subtle: #7D91B0;
  --fg-dim: #9fb0c8;       /* inconnu, éteint mais lisible */
  --fg-faint: #4b5d78;     /* absent, hors bridge */
  --fg-head: #4f6a90;      /* petits titres dans les dessins */
  --border: #1E3A63;
  --border-strong: #2A4C7A;
  --accent: #E8EEF7;
  --accent-fg: #071426;
  --ok: #2FBF71;
  --ok-hi: #3DDC97;        /* traits « ok » des dessins */
  --ok-fg: #9BE3BC;        /* texte sur fond ok */
  --warn: #E0A040;
  --warn-fg: #F4D9AE;
  --bad: #E0524E;
  --bad-hi: #f87171;       /* traits « coupé » des dessins */
  --bad-fg: #FFD2D0;
  --on-color: #071426;     /* texte sur une pastille de couleur (VLAN choisi, rang, WAN…) */
  --info: #7EB6FF;         /* en cours, modifié, progression */
  --info-soft: #9FD4FF;    /* verrous, propositions */
  --sel: #1D4677;          /* choix actif (sélecteurs, étapes) */
  --sel-border: #3A6AA6;
  --sel-fg: #fff;
  --agg: #22D3EE;          /* agrégation, descendant */
  --upload: #A78BFA;       /* montant (test des liaisons) */
  --violet: #A78BFA;       /* trunk, tunnel de gestion */
  --gold: #F5C542;         /* PTP, sélection du panneau */
  --pink: #F472B6;         /* câble jamais vu */
  --lilac: #A5B4FC;        /* cAP joint */
  --purple: #C084FC;
  --zt: #F5B83D;           /* ZeroTier */
  --coral: #ff6b6b;        /* agrégé */
  --amber: #FFB347;        /* redondant */
  --primary: #2563B8;      /* bouton principal */
  --primary-hover: #2E70CC;
  --primary-border: #3A78D0;
  --primary-fg: #fff;
  --scrim: rgba(7, 20, 38, .78);
  --shadow: rgba(0, 0, 0, .45);
  --shadow-sm: rgba(0, 0, 0, .3);
  --card-top: #14365f;     /* appareils de la Topologie, destinations */
  --card-bot: #0c2240;
  --hw-top: #1A2A40;       /* face avant : châssis */
  --hw-bot: #0E1A2B;
  --hw-inset: #13223A;
  --hw-hole: #0A1424;      /* intérieur d'un port */
  --hw-free: #1B2B44;
  --hw-lan: #4B6A94;
  --hw-led-off: #33465F;
  --hw-mark: #fff;         /* contour d'un port du Patch, coin tagué */
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --font: "Inter", ui-sans-serif, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --display: "Bebas Neue", sans-serif;
  --tap: 44px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* --- Sombre (graphite neutre, moins de bleu : régie dans le noir) ------------------------------ */
:root[data-theme="sombre"] {
  --bg: #0D0E11;
  --bg-elevated: #16181C;
  --bg-subtle: #1E2126;
  --bg-input: #1B1D22;
  --bg-menu: #1A1C21;
  --bg-deep: #08090B;
  --fg: #ECEDEF;
  --fg-muted: #8D94A0;
  --fg-subtle: #8D94A0;
  --fg-dim: #A9AFB9;
  --fg-faint: #4A505A;
  --fg-head: #6A717D;
  --border: #272A31;
  --border-strong: #3A3F49;
  --accent: #ECEDEF;
  --accent-fg: #0D0E11;
  --on-color: #0D0E11;
  --ok-fg: #A8E6C4;
  --info: #6FA8FF;
  --info-soft: #9CC4FF;
  --sel: #2B313B;
  --sel-border: #4C5563;
  --primary: #3A6FD8;
  --primary-hover: #4A7FE6;
  --primary-border: #5A8BEA;
  --scrim: rgba(5, 6, 8, .8);
  --shadow: rgba(0, 0, 0, .6);
  --shadow-sm: rgba(0, 0, 0, .4);
  --card-top: #1D2026;
  --card-bot: #14161A;
  --hw-top: #24272D;
  --hw-bot: #15171B;
  --hw-inset: #1B1E23;
  --hw-hole: #070809;
  --hw-free: #262A31;
  --hw-lan: #56637A;
  --hw-led-off: #3A3F48;
}

/* --- Clair (plein jour, écran au soleil, impression) ------------------------------------------- */
:root[data-theme="clair"] {
  color-scheme: light;
  --bg: #F3F5F8;
  --bg-elevated: #FFFFFF;
  --bg-subtle: #E9EDF3;
  --bg-input: #E4E9F0;
  --bg-menu: #FFFFFF;
  --bg-deep: #E8ECF2;
  --fg: #111C2D;
  --fg-muted: #56677F;
  --fg-subtle: #56677F;
  --fg-dim: #6B7A90;
  --fg-faint: #A5B0BF;
  --fg-head: #7D8CA2;
  --border: #D5DCE6;
  --border-strong: #B6C2D2;
  --accent: #111C2D;
  --accent-fg: #FFFFFF;
  --ok: #1E9E5A;
  --ok-hi: #149A5E;
  --ok-fg: #0D6B3A;
  --warn: #C67A0A;
  --warn-fg: #8A5200;
  --bad: #D43C38;
  --bad-hi: #DC3A3A;
  --bad-fg: #9E1D19;
  --on-color: #111C2D;
  --info: #2563EB;
  --info-soft: #7FB0FF;
  --sel: #2563EB;
  --sel-border: #1D4ED8;
  --sel-fg: #fff;
  --agg: #0891B2;
  --upload: #7C3AED;
  --violet: #7C3AED;
  --gold: #B8860B;
  --pink: #DB2777;
  --lilac: #6366F1;
  --purple: #9333EA;
  --zt: #C98700;
  --coral: #E14B4B;
  --amber: #E08600;
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-border: #1E40AF;
  --scrim: rgba(17, 28, 45, .42);
  --shadow: rgba(17, 28, 45, .16);
  --shadow-sm: rgba(17, 28, 45, .1);
  --card-top: #FFFFFF;
  --card-bot: #F0F3F7;
  --hw-top: #E2E7EE;       /* face avant : châssis clair, ports sombres comme le vrai */
  --hw-bot: #C9D1DC;
  --hw-inset: #D3DAE4;
  --hw-hole: #27303C;
  --hw-free: #BCC6D3;
  --hw-lan: #5F7CA6;
  --hw-led-off: #A3AEBE;
  --hw-mark: #111C2D;
}

/* --- Cyberpunk (néon magenta / cyan / jaune sur violet nuit, angles vifs) ---------------------- */
:root[data-theme="cyberpunk"] {
  --bg: #0A0612;
  --bg-elevated: #140C24;
  --bg-subtle: #1D1133;
  --bg-input: #1A0F2E;
  --bg-menu: #170D29;
  --bg-deep: #06030B;
  --fg: #F3EAFF;
  --fg-muted: #A48DC9;
  --fg-subtle: #A48DC9;
  --fg-dim: #BCA9DD;
  --fg-faint: #5B4780;
  --fg-head: #8063AE;
  --border: #36205C;
  --border-strong: #5A2D8F;
  --accent: #FCEE0A;
  --accent-fg: #0A0612;
  --ok: #00F59B;
  --ok-hi: #00FF9F;
  --ok-fg: #A6FFDA;
  --warn: #FCEE0A;
  --warn-fg: #FFF7A8;
  --bad: #FF2A6D;
  --bad-hi: #FF4D88;
  --bad-fg: #FFC3D6;
  --on-color: #0A0612;
  --info: #05D9E8;
  --info-soft: #7DF9FF;
  --sel: #3A0F5C;
  --sel-border: #D300C5;
  --sel-fg: #fff;
  --agg: #05D9E8;
  --upload: #B967FF;
  --violet: #B967FF;
  --gold: #FCEE0A;
  --pink: #FF2A6D;
  --lilac: #A9A1FF;
  --purple: #E040FB;
  --zt: #FFB800;
  --coral: #FF3864;
  --amber: #FF9E00;
  --primary: #C200B4;
  --primary-hover: #DE10D0;
  --primary-border: #FF4DF3;
  --scrim: rgba(10, 6, 18, .82);
  --shadow: rgba(211, 0, 197, .22);
  --shadow-sm: rgba(5, 217, 232, .18);
  --card-top: #1D0F36;
  --card-bot: #100820;
  --hw-top: #1B1031;
  --hw-bot: #0D0619;
  --hw-inset: #22143E;
  --hw-hole: #05030A;
  --hw-free: #26173F;
  --hw-lan: #4D3C91;
  --hw-led-off: #3A2A57;
  --hw-mark: #F3EAFF;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

/* --- proportions : une seule règle pour toute l'interface ------------------------------------
   espacements sur une grille de 4 px (4·8·12·16·24·32), texte 12·13·15·18·24·32,
   une hauteur pour toutes les commandes (40 px, 44 px pour les actions principales), trois arrondis
   (champ 10, cadre 14, carte 18) et des pilules pour les boutons. */
:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --ctl: 40px; --ctl-lg: 44px; --r-field: 10px; --r-box: 14px; --r-card: 18px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-xxl: 32px; }
:root[data-theme="cyberpunk"] { --r-field: 2px; --r-box: 4px; --r-card: 6px; }
/* cyberpunk : lueur néon sur les titres et la sélection */
:root[data-theme="cyberpunk"] h1, :root[data-theme="cyberpunk"] h2 { text-shadow: 0 0 10px rgba(5, 217, 232, .45); }
:root[data-theme="cyberpunk"] .seg button.on { box-shadow: inset 0 0 0 1px var(--sel-border), 0 0 12px rgba(211, 0, 197, .45); }
:root[data-theme="cyberpunk"] .btn.primary { box-shadow: 0 0 14px rgba(211, 0, 197, .45); }