/* Zwei Stile, ein Aufbau.
   Jede Farbe, Fläche und Rundung der Oberfläche steht hier als Variable; app.css kennt
   nur die Namen. «theme-day» ist der ruhige Arbeitsstil (wie das CRM), «theme-night»
   der Nachthimmel (wie der Upload von transfergate). Welche Seite welchen Stil trägt,
   steht in der Konfiguration (WG_THEME_HOME, WG_THEME_WORK), nicht im Code. */

@font-face {
  font-family: "Sora";
  src: url("/static/fonts/Sora.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --font: "Sora", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Arbeitsfläche */
  --bg: #f7f8fa;
  --bg-image: none;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-blur: none;
  --line: #e3e6ec;
  --line-strong: #cfd4dd;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --radius: 10px;
  --radius-s: 6px;

  /* Schrift */
  --text: #16181d;
  --muted: #5b6270;
  --faint: #7f8796;
  --eyebrow: #b84a00;

  /* Akzente */
  --accent: #ff6b00;
  --accent-text: #9a3d00;
  --accent-soft: #fff3ea;
  --link: #1f5fd0;
  --link-soft: #eaf1ff;
  --ok: #0b6b46;
  --ok-soft: #e6f6ef;
  --warn: #7a4f00;
  --warn-soft: #fff4dd;
  --mark: #ffe0c2;
  --mark-text: #16181d;
  --code-bg: #f1f3f6;
  --focus: #1f5fd0;

  /* Knopf */
  --btn-bg: #ff6b00;
  --btn-text: #0b0f19;
  --btn-shadow: none;

  /* Eingabefeld */
  --field-bg: #ffffff;
  --field-line: #cfd4dd;

  /* Seitenleiste: in beiden Stilen dunkel, sie ist die Klammer */
  --side-bg: #0b0f19;
  --side-blur: none;
  --side-line: rgba(255, 255, 255, 0.08);
  --side-text: #becae0;
  --side-strong: #ffffff;
  --side-faint: #8f9cb8;
  --side-active: rgba(255, 107, 0, 0.2);
  --side-gap: 0px;
  --side-radius: 0px;

  /* Flugbahn */
  --track: #e3e6ec;
  --track-glow: none;
}

.theme-night {
  --bg: #0b0f19;
  --bg-image:
    radial-gradient(900px 520px at 8% -8%, rgba(75, 163, 255, 0.2), transparent 60%),
    radial-gradient(760px 480px at 96% -4%, rgba(255, 107, 0, 0.17), transparent 62%),
    linear-gradient(180deg, #0b1423 0%, #0b1020 38%, #090d17 100%);
  --surface: rgba(17, 23, 40, 0.78);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-blur: blur(18px);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --radius: 24px;
  --radius-s: 14px;

  --text: #f4f7ff;
  --muted: #becae0;
  --faint: #8f9cb8;
  --eyebrow: #ffd0ad;

  --accent-text: #ffd0ad;
  --accent-soft: rgba(255, 107, 0, 0.16);
  --link: #a9d1ff;
  --link-soft: rgba(75, 163, 255, 0.16);
  --ok: #3ddc97;
  --ok-soft: rgba(61, 220, 151, 0.14);
  --warn: #ffb84d;
  --warn-soft: rgba(255, 184, 77, 0.14);
  --mark: rgba(255, 107, 0, 0.35);
  --mark-text: #ffffff;
  --code-bg: rgba(255, 255, 255, 0.08);
  --focus: #a9d1ff;

  --btn-bg: linear-gradient(135deg, #ff6b00 0%, #ff8a2a 55%, #ffae70 100%);
  --btn-text: #1a0a00;
  --btn-shadow: 0 10px 30px rgba(255, 107, 0, 0.35);

  --field-bg: rgba(255, 255, 255, 0.07);
  --field-line: rgba(255, 255, 255, 0.2);

  --side-bg: rgba(17, 23, 40, 0.78);
  --side-blur: blur(18px);
  --side-line: rgba(255, 255, 255, 0.12);
  --side-gap: 16px;
  --side-radius: 24px;

  --track: rgba(255, 255, 255, 0.12);
  --track-glow: 0 0 0 6px rgba(255, 107, 0, 0.18), 0 0 26px rgba(255, 138, 42, 0.9);
}