/* ============================================================
   AiTransAgent.de — THEME 2: MODERN-KI („Energie")
   Verbindliche Design-Tokens. Dark-Space mit Neon-Disziplin.
   Gleiche Token-Namen wie Steampunk — nur andere Werte!
   Komponenten dürfen NUR diese Variablen verwenden.
   ============================================================ */

[data-theme="modern"] {
  /* --- Flächen --- */
  --bg: #0a0e16;            /* Deep Space — Hintergrund */
  --surface: #111827;       /* Panel — Karten */
  --surface-2: #1a2332;     /* Verschachtelte Flächen */
  --border: #2b3648;        /* Rahmen, Trenner */

  /* --- Text --- */
  --text: #f3f4f6;          /* Primärtext (16:1 AAA) */
  --text-muted: #9ca3af;    /* Sekundärtext (7.5:1 AA) */
  --text-inverse: #0a0e16;  /* Text auf hellen Flächen (CTA) */

  /* --- Akzente --- */
  --brass: #22d3ee;         /* Cyan — generischer Akzent (ersetzt Messing) */
  --copper: #818cf8;        /* Indigo-Violett — Sekundärakzent */
  --rust: #f59e0b;          /* Amber — NUR dekorativ */
  --verdigris: #22d3ee;     /* Cyan — Tech/Links (9.3:1 AA) */
  --cta: #22d3ee;           /* Cyan — Primär-CTA (dunkler Text) */
  --cta-hover: #67e8f9;     /* Helleres Cyan */
  --cta-text: #0a0e16;      /* Dunkler Text auf CTA */

  /* --- Status --- */
  --success: #34d399;
  --danger: #f87171;

  /* --- Dunkle Missionsfläche --- */
  --parchment: #0f172a;
  --parchment-deep: #111827;
  --parchment-text: #f3f4f6;
  --parchment-muted: #9ca3af;
  --parchment-strong: #22d3ee;

  /* --- Szenen und Oberflächen --- */
  --header-bg: linear-gradient(180deg, #101827 0%, #0a0e16 100%);
  --nav-bg: #0f172a;
  --services-bg: linear-gradient(180deg, #101827 0%, #0a0e16 100%);
  --projects-bg: linear-gradient(160deg, #0a0e16 0%, #101a2c 100%);
  --hero-overlay: linear-gradient(90deg, rgba(10,14,22,.98) 0%, rgba(10,14,22,.85) 40%, rgba(10,14,22,.40) 78%, rgba(10,14,22,.62) 100%), linear-gradient(180deg, rgba(10,14,22,.50) 0%, rgba(10,14,22,0) 30%, rgba(10,14,22,.9) 100%);
  --hero-glow: rgba(34,211,238,.35);
  --decorative-shadow: 0 1px 0 rgba(0,0,0,.5);
  --rivet-shadow: inset 0 1px 1px rgba(255,255,255,.10), 0 1px 0 rgba(0,0,0,.5);
  --gauge-inner-shadow: inset 0 2px 8px rgba(0,0,0,.6);

  /* --- Typografie --- */
  --font-display: "Space Grotesk", sans-serif;
  --font-display-accent: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-label: "IBM Plex Mono", monospace;
  --font-mono: "IBM Plex Mono", monospace;

  /* --- Geometrie --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --border-w: 1px;
  --border-w-thick: 2px;

  /* --- Schatten (Clean: weich, kühl, mit Glow-Disziplin) --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
  --glow: 0 0 16px rgba(34, 211, 238, .25);

  /* --- Texturen --- */
  --texture-noise: none;

  /* --- Bewegungspostur: präzise, zügig --- */
  --ease-mech: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-mech: 500ms;

  /* --- Fach-Tokens --- */
  --gauge-face: #111827;
  --gauge-rim: #22d3ee;
  --gauge-tick: #f3f4f6;
  --gauge-needle: #22d3ee;
  --gauge-svg-shadow: 0 0 4px rgba(34,211,238,.25);
  --gauge-bezel-bg: linear-gradient(145deg, #142137, #23344b);
  --gauge-bezel-edge: #22d3ee;
  --gauge-bezel-shadow: 0 0 12px rgba(34,211,238,.18);
  --gauge-glass-reflection: linear-gradient(150deg, rgba(243,244,246,.1), transparent 50%);
  --rivet: #2b3648;
}