/* =============================================================================
   Fading Star Empires — Design-Tokens (Design-Paket 1, 25.09.2026)
   Eine Quelle für Altsystem (Bootstrap 5.3) und 3D-Client-HUD. Marke: Gold auf
   Schwarz (Logo h2_oneline), technische Linien, ruhige Flächen. Spielfeld (3D-
   Szene) nutzt diese Tokens NICHT — es bleibt optisch wie bisher.
   ============================================================================= */
:root {
  color-scheme: dark;
  /* Flächen + Text */
  --cg-bg: #0b0b0e;
  --cg-surface: #15161c;
  --cg-surface-raised: #1e2028;
  --cg-text: #f1ece0;
  --cg-text-muted: #a6a398;
  --cg-border: #2b2e38;
  --cg-control-border: #5a5f6e;
  /* Marke + Aktionen */
  --cg-primary: #f3d9a0;
  --cg-primary-hover: #f8e6bc;
  --cg-on-primary: #15120a;
  --cg-accent: #e0a64b;
  --cg-success: #63d6a0;
  --cg-warning: #e0a64b;
  --cg-danger: #ff8a91;
  --cg-info: #6dcef5;
  --cg-focus: #f3d9a0;
  /* Sechs Schlüssel (Sekundärpalette, Karten-Keys) */
  --cg-key-politics: #7fc79a;
  --cg-key-diplomacy: #6dcef5;
  --cg-key-fleet: #8680bc;
  --cg-key-industry: #f49578;
  --cg-key-psi: #fdf497;
  --cg-key-mystic: #fccf85;
  /* Typografie */
  --cg-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cg-font-display: "Chakra Petch", "IBM Plex Sans", system-ui, sans-serif;
  --cg-text-sm: 0.875rem;
  --cg-text-base: 1rem;
  --cg-title-section: 1.25rem;
  --cg-title-page: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  /* Form + Abstände */
  --cg-radius-sm: 6px;
  --cg-radius: 8px;
  --cg-radius-panel: 12px;
  --cg-control-min: 44px;
  --cg-shadow-panel: 0 12px 32px rgb(0 0 0 / 45%);
  /* Bootstrap 5.3 auf die Tokens mappen */
  --bs-body-bg: var(--cg-bg);
  --bs-body-color: var(--cg-text);
  --bs-body-font-family: var(--cg-font-body);
  --bs-secondary-color: var(--cg-text-muted);
  --bs-border-color: var(--cg-border);
  --bs-link-color: var(--cg-primary);
  --bs-link-hover-color: var(--cg-primary-hover);
  --bs-primary: var(--cg-primary);
  --bs-primary-rgb: 243, 217, 160;
  --bs-success-rgb: 99, 214, 160;
  --bs-danger-rgb: 255, 138, 145;
  --bs-warning-rgb: 224, 166, 75;
  --bs-info-rgb: 109, 206, 245;
}
body.light-mode {
  color-scheme: light;
  --cg-bg: #f3f2ee;
  --cg-surface: #ffffff;
  --cg-surface-raised: #ebe8e0;
  --cg-text: #1a1814;
  --cg-text-muted: #5c584f;
  --cg-border: #d6d2c8;
  --cg-control-border: #7a766c;
  --cg-primary: #8a6a1f;
  --cg-primary-hover: #6f5417;
  --cg-on-primary: #ffffff;
  --cg-accent: #a4691a;
  --cg-success: #1f7a4f;
  --cg-warning: #8a5a00;
  --cg-danger: #b42336;
  --cg-info: #1f6f9a;
  --cg-focus: #8a6a1f;
  --cg-shadow-panel: 0 12px 32px rgb(26 24 20 / 12%);
  --bs-primary-rgb: 138, 106, 31;
  --bs-link-color: var(--cg-primary);
  --bs-link-hover-color: var(--cg-primary-hover);
  --bs-success-rgb: 31, 122, 79;
  --bs-danger-rgb: 180, 35, 54;
  --bs-warning-rgb: 138, 90, 0;
  --bs-info-rgb: 31, 111, 154;
}

/* ----- Basis ----- */
body { background: var(--cg-bg); color: var(--cg-text); font-family: var(--cg-font-body); font-size: var(--cg-text-base); line-height: 1.5; }
h1, h2, h3, h4, h5, .cg-display { font-family: var(--cg-font-display); font-weight: 700; letter-spacing: 0.01em; }
a { color: var(--cg-primary); }
a:hover { color: var(--cg-primary-hover); }
:focus-visible { outline: 3px solid var(--cg-focus); outline-offset: 3px; }
.text-white-50, .text-muted, .text-secondary { color: var(--cg-text-muted) !important; }
.cg-num { font-family: var(--cg-font-display); font-variant-numeric: tabular-nums; }

/* ----- Buttons: eine Aktionshierarchie ----- */
.btn { --bs-btn-border-radius: var(--cg-radius); --bs-btn-font-weight: 600; min-height: var(--cg-control-min); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { --bs-btn-border-radius: var(--cg-radius); min-height: 36px; }
.btn-primary, .btn-success { --bs-btn-bg: var(--cg-primary); --bs-btn-border-color: var(--cg-primary); --bs-btn-color: var(--cg-on-primary); --bs-btn-hover-bg: var(--cg-primary-hover); --bs-btn-hover-border-color: var(--cg-primary-hover); --bs-btn-hover-color: var(--cg-on-primary); --bs-btn-active-bg: var(--cg-primary-hover); --bs-btn-active-border-color: var(--cg-primary-hover); --bs-btn-active-color: var(--cg-on-primary); --bs-btn-disabled-bg: var(--cg-surface-raised); --bs-btn-disabled-border-color: var(--cg-border); --bs-btn-disabled-color: var(--cg-text-muted); }
.btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-light, .btn-outline-secondary { --bs-btn-color: var(--cg-text); --bs-btn-border-color: var(--cg-control-border); --bs-btn-hover-bg: var(--cg-surface-raised); --bs-btn-hover-border-color: var(--cg-primary); --bs-btn-hover-color: var(--cg-text); --bs-btn-active-bg: var(--cg-surface-raised); --bs-btn-active-border-color: var(--cg-primary); --bs-btn-active-color: var(--cg-text); }
.btn-outline-primary, .btn-outline-success { --bs-btn-color: var(--cg-primary); --bs-btn-border-color: var(--cg-primary); --bs-btn-hover-color: var(--cg-primary); }
.btn-outline-danger, .btn-danger { --bs-btn-color: var(--cg-danger); --bs-btn-border-color: var(--cg-danger); --bs-btn-bg: transparent; --bs-btn-hover-bg: rgb(255 138 145 / 12%); --bs-btn-hover-border-color: var(--cg-danger); --bs-btn-hover-color: var(--cg-danger); }
.btn-secondary { --bs-btn-bg: var(--cg-surface-raised); --bs-btn-border-color: var(--cg-border); --bs-btn-color: var(--cg-text); --bs-btn-hover-bg: var(--cg-border); --bs-btn-hover-border-color: var(--cg-control-border); --bs-btn-hover-color: var(--cg-text); }

/* ----- Flächen ----- */
.card, .modal-content, .list-group-item, .dropdown-menu, .offcanvas { background: var(--cg-surface); color: var(--cg-text); border: 1px solid var(--cg-border); border-radius: var(--cg-radius-panel); }
.card { --bs-card-bg: var(--cg-surface); --bs-card-border-color: var(--cg-border); --bs-card-cap-bg: transparent; }
.list-group-item { --bs-list-group-bg: var(--cg-surface-raised); --bs-list-group-color: var(--cg-text); --bs-list-group-border-color: var(--cg-border); border-radius: var(--cg-radius); }
.dropdown-menu { --bs-dropdown-bg: var(--cg-surface); --bs-dropdown-color: var(--cg-text); --bs-dropdown-link-color: var(--cg-text); --bs-dropdown-link-hover-bg: var(--cg-surface-raised); --bs-dropdown-link-hover-color: var(--cg-text); --bs-dropdown-link-active-bg: var(--cg-surface-raised); --bs-dropdown-link-active-color: var(--cg-primary); --bs-dropdown-border-color: var(--cg-border); border-radius: var(--cg-radius); }
.modal-content { --bs-modal-bg: var(--cg-surface); --bs-modal-border-color: var(--cg-border); }
.modal-header, .modal-footer { border-color: var(--cg-border); }
.form-control, .form-select { --bs-body-bg: var(--cg-bg); background-color: var(--cg-bg); color: var(--cg-text); border: 1px solid var(--cg-control-border); border-radius: var(--cg-radius); min-height: var(--cg-control-min); }
.form-control:focus, .form-select:focus { border-color: var(--cg-primary); box-shadow: 0 0 0 3px rgb(243 217 160 / 25%); background-color: var(--cg-bg); color: var(--cg-text); }
.form-control::placeholder { color: var(--cg-text-muted); opacity: 1; }
.form-label { font-weight: 600; color: var(--cg-text); }
.form-check-input:checked { background-color: var(--cg-primary); border-color: var(--cg-primary); }
.badge { border-radius: var(--cg-radius-sm); font-weight: 600; }
.nav-pills .nav-link { color: var(--cg-text-muted); border-radius: var(--cg-radius); }
.nav-pills .nav-link.active { background: var(--cg-surface-raised); color: var(--cg-primary); border: 1px solid var(--cg-border); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--cg-text); --bs-table-border-color: var(--cg-border); }
.progress { background: var(--cg-surface-raised); }
.progress-bar { background: var(--cg-primary); color: var(--cg-on-primary); }
.alert { border-radius: var(--cg-radius); }

/* ----- Wiederverwendbare FSE-Bausteine (wie im Mockup) ----- */
.cg-panel { background: var(--cg-surface); border: 1px solid var(--cg-border); border-radius: var(--cg-radius-panel); padding: 1.5rem; }
.cg-panel-accent { border-top: 2px solid var(--cg-primary); }
.cg-panel-next { border-left: 3px solid var(--cg-primary); }
.cg-kicker { font-family: var(--cg-font-display); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cg-primary); }
.cg-row { display: flex; align-items: center; gap: 1rem; padding: .875rem 1rem; background: var(--cg-surface-raised); border: 1px solid var(--cg-border); border-radius: var(--cg-radius); }
.cg-row-me { border-color: var(--cg-primary); }
.cg-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cg-bg); border: 1px solid var(--cg-control-border); display: inline-flex; align-items: center; justify-content: center; color: var(--cg-primary); font-family: var(--cg-font-display); font-weight: 700; font-size: .8125rem; flex-shrink: 0; object-fit: cover; }
.cg-chip { display: inline-flex; align-items: center; gap: .5rem; height: 32px; padding: 0 .75rem; border-radius: 16px; background: var(--cg-surface-raised); border: 1px solid var(--cg-border); font-size: .8125rem; font-weight: 600; }
.cg-chip-primary { background: var(--cg-primary); color: var(--cg-on-primary); border-color: var(--cg-primary); }
.cg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cg-text-muted); flex-shrink: 0; }
.cg-dot-on { background: var(--cg-success); }
.cg-dot-wait { background: var(--cg-warning); }
.cg-tag { font-family: var(--cg-font-display); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; padding: 4px 6px; border-radius: 4px; background: var(--cg-primary); color: var(--cg-on-primary); }
.cg-tag-info { background: rgb(109 206 245 / 12%); color: var(--cg-info); border: 1px solid var(--cg-info); }
.cg-stat { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.25rem; background: var(--cg-surface); border: 1px solid var(--cg-border); border-radius: var(--cg-radius-panel); }
.cg-stat .cg-num { font-size: 1.75rem; line-height: 1; font-weight: 700; }
.cg-level { display: inline-flex; align-items: center; font-family: var(--cg-font-display); font-size: .75rem; font-weight: 600; padding: 6px 8px; border-radius: var(--cg-radius-sm); background: var(--cg-surface-raised); border: 1px solid var(--cg-control-border); color: var(--cg-primary); }
.cg-seg { display: inline-flex; border: 1px solid var(--cg-control-border); border-radius: var(--cg-radius); overflow: hidden; }
.cg-seg a, .cg-seg button { min-height: 40px; padding: 0 .875rem; display: inline-flex; align-items: center; color: var(--cg-text); text-decoration: none; background: transparent; border: 0; font-size: .875rem; font-weight: 500; }
.cg-seg .active { background: var(--cg-primary); color: var(--cg-on-primary); font-weight: 600; }
.cg-toasts .toast.bg-success, .cg-toasts .toast.bg-warning, .cg-toasts .toast.bg-info { color: var(--cg-on-primary) !important; }
.cg-toasts .toast.bg-success { background: var(--cg-success) !important; }
.cg-toasts .toast.bg-warning { background: var(--cg-warning) !important; }
.cg-toasts .toast.bg-info { background: var(--cg-info) !important; }
.cg-toasts .toast.bg-danger { background: var(--cg-danger) !important; color: var(--cg-on-primary) !important; }
.cg-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 2rem)); }

/* Heller Modus: global.css färbt jeden Link dunkelblau (body.light-mode a:link) und schlägt
   damit Link-Knöpfe und Navigationsmarker — Knöpfe und Nav-Links behalten ihre Farbe. */
body.light-mode a.btn, body.light-mode a.btn:link, body.light-mode a.btn:visited, body.light-mode a.btn:hover { color: var(--bs-btn-color); }
body.light-mode a.btn:hover, body.light-mode a.btn:focus-visible { color: var(--bs-btn-hover-color); }
body.light-mode .cg-bottom-nav a, body.light-mode .cg-bottom-nav a:link, body.light-mode .navbar .nav-link, body.light-mode .navbar .dropdown-item { color: var(--cg-text-muted); }
body.light-mode .cg-bottom-nav a[aria-current="page"], body.light-mode .navbar .nav-link.active { color: var(--cg-primary-hover); }

/* ----- Mobil ----- */
@media (max-width: 767.98px) {
  body.cg-has-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .cg-panel { padding: 1rem; }
  .cg-toasts { bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* Navbar-Schalter (Sprache, Push, Theme, Nachrichten) als 44-px-Touchziele */
  .navbar .btn-sm { min-height: 44px; }
  .navbar .btn-theme-switch { min-height: 44px; min-width: 44px; }
}
.cg-bottom-nav { display: none; }
@media (max-width: 767.98px) {
  .cg-bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--cg-bg); border-top: 1px solid var(--cg-border); z-index: 1040; }
  .cg-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--cg-text-muted); font-size: .6875rem; font-weight: 500; min-height: 44px; }
  .cg-bottom-nav a[aria-current="page"] { color: var(--cg-primary); font-weight: 600; }
  .cg-bottom-nav svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }