/* ═══════════════════════════════════════════════════════════════════════════
   VEKTO · Shared Theme · Canonical Light/Dark Variable Definitions
   ───────────────────────────────────────────────────────────────────────────
   Eine einzige Quelle für alle Farb- und Größen-Variablen. Geladen via:
     <link rel="stylesheet" href="/shared/theme.css">
   in allen geschützten Tool-Files und im Login.

   Die Tool-spezifischen body.dark .foo { ... } Overrides bleiben pro Datei,
   bis ihre Basisstile auf var(--…) umgestellt sind.
   ═══════════════════════════════════════════════════════════════════════════ */

/* IBM Plex Schriftfamilien — zentral hier statt pro Tool-Datei.
   Superset aller bisher pro Datei geladenen Schnitte (@import muss zuoberst stehen). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&display=swap');

:root {
  /* ── Text ────────────────────────────────────────────── */
  --ink:        #1C1A18;       /* primary text */
  --ink-soft:   #4A4238;       /* secondary text */
  --ink-mute:   #7A6E62;       /* muted text */

  /* ── Surfaces (warm paper palette) ──────────────────── */
  --paper:      #F5EEE8;       /* main background */
  --paper-2:    #EDE5DC;       /* elevated surface */
  --paper-3:    #E6DDD2;       /* card background */
  --paper-4:    #FAF4EE;       /* contrast highlight (lightest) */

  /* ── Borders / lines ─────────────────────────────────── */
  --line:       #C8B8A8;       /* primary borders */
  --line-2:     #B8A898;       /* darker line */
  --line-soft:  #D4C8BA;       /* faint line */

  /* ── Accents ─────────────────────────────────────────── */
  --accent:     #C04010;       /* orange-red (primary) */
  --accent-2:   #1E6A9E;       /* teal-blue (secondary) */
  --gold:       #7A6010;       /* gold/amber */
  --green:      #1A7A42;       /* success */

  /* ── Shape & shadow ──────────────────────────────────── */
  --radius:     10px;
  --shadow:     0 2px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.18), 0 2px 12px rgba(0,0,0,.10);
}

/* ─── Dark Mode: nur Variablen umdefinieren ───────────────────────────────
   Statt jedes Element einzeln mit body.dark .foo zu überschreiben, sollte
   das CSS der einzelnen Komponenten var(--ink), var(--paper), etc. nutzen.
   Datei-spezifische body.dark .x { … } Overrides bleiben bestehen, bis sie
   nicht mehr nötig sind. */
body.dark {
  --ink:        #E8E0D4;
  --ink-soft:   #C8BDA8;
  --ink-mute:   #8A7E6C;

  --paper:      #1E1A16;
  --paper-2:    #2A241D;
  --paper-3:    #322B22;
  --paper-4:    #241F19;

  --line:       #4A3F32;
  --line-2:     #5A4F42;
  --line-soft:  #3A2F22;
  /* Accent-Farben bleiben gleich in beiden Modi */
}