/* =========================================================
   Home_System_SARAH - Framework.DesignSystem
   Global design tokens and base styles

   This file belongs to the 00_Framework layer.
   It intentionally contains no app-specific navigation or module UI.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display:    'Orbitron', sans-serif;
  --font-mono:       'JetBrains Mono', 'Cascadia Code', 'Fira Mono', monospace;

  --color-primary-rgb:   108, 99, 255;
  --color-secondary-rgb: 0, 212, 170;
  --color-accent-rgb:    255, 107, 157;

  --color-primary:        #6c63ff;
  --color-primary-light:  #8b85ff;
  --color-primary-dark:   #4e46d9;
  --color-secondary:      #00d4aa;
  --color-accent:         #ff6b9d;
  --color-warning:        #f59e0b;
  --color-success:        #22c55e;
  --color-error:          #ef4444;

  --gradient-primary:     linear-gradient(135deg, #6c63ff 0%, #8b85ff 50%, #00d4aa 100%);
  --gradient-card-left:   linear-gradient(145deg, #13131f 0%, #1e1b4b 50%, #0f172a 100%);
  --gradient-security:    linear-gradient(145deg, #2a1f52 0%, #3b82f6 55%, #14b8a6 100%);

  --color-primary-soft-03: rgba(var(--color-primary-rgb), 0.03);
  --color-primary-soft-04: rgba(var(--color-primary-rgb), 0.04);
  --color-primary-soft-05: rgba(var(--color-primary-rgb), 0.05);
  --color-primary-soft-06: rgba(var(--color-primary-rgb), 0.06);
  --color-primary-soft-08: rgba(var(--color-primary-rgb), 0.08);
  --color-primary-soft-10: rgba(var(--color-primary-rgb), 0.10);
  --color-primary-soft-12: rgba(var(--color-primary-rgb), 0.12);
  --color-primary-soft-14: rgba(var(--color-primary-rgb), 0.14);
  --color-primary-soft-15: rgba(var(--color-primary-rgb), 0.15);
  --color-primary-soft-18: rgba(var(--color-primary-rgb), 0.18);
  --color-primary-soft-20: rgba(var(--color-primary-rgb), 0.20);
  --color-primary-soft-22: rgba(var(--color-primary-rgb), 0.22);
  --color-primary-soft-30: rgba(var(--color-primary-rgb), 0.30);
  --color-primary-soft-35: rgba(var(--color-primary-rgb), 0.35);
  --color-primary-soft-40: rgba(var(--color-primary-rgb), 0.40);
  --color-primary-soft-45: rgba(var(--color-primary-rgb), 0.45);

  --color-secondary-soft-08: rgba(var(--color-secondary-rgb), 0.08);
  --color-secondary-soft-10: rgba(var(--color-secondary-rgb), 0.10);
  --color-secondary-soft-12: rgba(var(--color-secondary-rgb), 0.12);
  --color-secondary-soft-14: rgba(var(--color-secondary-rgb), 0.14);
  --color-secondary-soft-15: rgba(var(--color-secondary-rgb), 0.15);
  --color-secondary-soft-20: rgba(var(--color-secondary-rgb), 0.20);

  --color-accent-soft-06: rgba(var(--color-accent-rgb), 0.06);
  --color-accent-soft-08: rgba(var(--color-accent-rgb), 0.08);
  --color-accent-soft-10: rgba(var(--color-accent-rgb), 0.10);
  --color-accent-soft-12: rgba(var(--color-accent-rgb), 0.12);
  --color-accent-soft-14: rgba(var(--color-accent-rgb), 0.14);
  --color-accent-soft-15: rgba(var(--color-accent-rgb), 0.15);

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;

  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-default: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);

  --glass-blur: blur(20px);
  --color-on-brand: #ffffff;

  /* Glow-Effekte */
  --glow-primary:    0 0 14px rgba(var(--color-primary-rgb), 0.60);
  --glow-accent:     0 0 14px rgba(var(--color-accent-rgb), 0.60);
  --glow-cyan:       0 0 14px rgba(63, 231, 255, 0.60);
  --glow-icon:       drop-shadow(0 0 6px rgba(var(--color-primary-rgb), 0.80));
  --starfield-opacity: 0.5;
}

html,
html[data-mode="dark"] {
  --color-bg-void:        #09090f;
  --color-bg-deep:        #0f0f1a;
  --color-bg-surface:     #13131f;
  --color-bg-elevated:    #1a1a2e;

  --color-text-primary:   #f1f0ff;
  --color-text-secondary: #a09dc0;
  --color-text-muted:     #6b6890;

  --color-border:         var(--color-primary-soft-15);
  --color-border-focus:   rgba(var(--color-primary-rgb), 0.50);
  --color-border-subtle:  var(--color-primary-soft-05);

  --glass-bg:             rgba(26, 26, 46, 0.70);
  --glass-bg-lighter:     rgba(30, 30, 55, 0.60);
  --glass-border:         1px solid rgba(var(--color-primary-rgb), 0.20);
  --glass-shadow:         0 8px 32px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(var(--color-primary-rgb), 0.08);

  --surface-overlay-02:   rgba(255, 255, 255, 0.02);
  --surface-overlay-03:   rgba(255, 255, 255, 0.03);
  --surface-overlay-04:   rgba(255, 255, 255, 0.04);
  --surface-overlay-05:   rgba(255, 255, 255, 0.05);
  --surface-overlay-06:   rgba(255, 255, 255, 0.06);
  --surface-overlay-08:   rgba(255, 255, 255, 0.08);
  --surface-overlay-10:   rgba(255, 255, 255, 0.10);
  --surface-overlay-12:   rgba(255, 255, 255, 0.12);

  --shell-sidebar-bg:     rgba(13, 13, 25, 0.97);
  --shell-sidebar-border: var(--color-primary-soft-12);
  --form-panel-bg:        rgba(13, 13, 25, 0.60);
  --topbar-bg:            rgba(13, 13, 25, 0.90);
  --overlay-backdrop:     rgba(0, 0, 0, 0.55);

  --shadow-elevated:      0 24px 64px rgba(0, 0, 0, 0.50);
  --shadow-soft:          0 12px 40px rgba(0, 0, 0, 0.30);
}

html[data-mode="light"] {
  --color-bg-void:        #eef3fa;
  --color-bg-deep:        #f6f9fd;
  --color-bg-surface:     #ffffff;
  --color-bg-elevated:    #fbfdff;

  --color-text-primary:   #162033;
  --color-text-secondary: #53627d;
  --color-text-muted:     #7c8ba5;

  --color-border:         rgba(15, 23, 42, 0.08);
  --color-border-focus:   rgba(var(--color-primary-rgb), 0.35);
  --color-border-subtle:  rgba(15, 23, 42, 0.05);

  --glass-bg:             rgba(255, 255, 255, 0.84);
  --glass-bg-lighter:     rgba(249, 251, 255, 0.92);
  --glass-border:         1px solid rgba(15, 23, 42, 0.06);
  --glass-shadow:         0 18px 48px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(var(--color-primary-rgb), 0.05);

  --surface-overlay-02:   rgba(15, 23, 42, 0.02);
  --surface-overlay-03:   rgba(15, 23, 42, 0.03);
  --surface-overlay-04:   rgba(15, 23, 42, 0.04);
  --surface-overlay-05:   rgba(15, 23, 42, 0.05);
  --surface-overlay-06:   rgba(15, 23, 42, 0.06);
  --surface-overlay-08:   rgba(15, 23, 42, 0.08);
  --surface-overlay-10:   rgba(15, 23, 42, 0.10);
  --surface-overlay-12:   rgba(15, 23, 42, 0.12);

  --shell-sidebar-bg:     rgba(255, 255, 255, 0.92);
  --shell-sidebar-border: rgba(15, 23, 42, 0.08);
  --form-panel-bg:        rgba(255, 255, 255, 0.84);
  --topbar-bg:            rgba(255, 255, 255, 0.88);
  --overlay-backdrop:     rgba(15, 23, 42, 0.22);

  --shadow-elevated:      0 24px 64px rgba(15, 23, 42, 0.18);
  --shadow-soft:          0 12px 32px rgba(15, 23, 42, 0.14);
}

html[data-theme="ocean"] {
  --color-primary-rgb:   37, 99, 235;
  --color-secondary-rgb: 6, 182, 212;
  --color-accent-rgb:    56, 189, 248;

  --color-primary:        #2563eb;
  --color-primary-light:  #60a5fa;
  --color-primary-dark:   #1d4ed8;
  --color-secondary:      #06b6d4;
  --color-accent:         #38bdf8;

  --gradient-primary:     linear-gradient(135deg, #2563eb 0%, #0ea5e9 55%, #06b6d4 100%);
  --gradient-card-left:   linear-gradient(145deg, #101827 0%, #0f2d63 52%, #083344 100%);
  --gradient-security:    linear-gradient(145deg, #0f2d63 0%, #2563eb 50%, #06b6d4 100%);
}

html[data-theme="emerald"] {
  --color-primary-rgb:   5, 150, 105;
  --color-secondary-rgb: 16, 185, 129;
  --color-accent-rgb:    132, 204, 22;

  --color-primary:        #059669;
  --color-primary-light:  #34d399;
  --color-primary-dark:   #047857;
  --color-secondary:      #10b981;
  --color-accent:         #84cc16;

  --gradient-primary:     linear-gradient(135deg, #059669 0%, #10b981 55%, #84cc16 100%);
  --gradient-card-left:   linear-gradient(145deg, #0b1514 0%, #0f3a30 52%, #263b0c 100%);
  --gradient-security:    linear-gradient(145deg, #0f3a30 0%, #059669 50%, #84cc16 100%);
}

html[data-theme="sunset"] {
  --color-primary-rgb:   249, 115, 22;
  --color-secondary-rgb: 245, 158, 11;
  --color-accent-rgb:    236, 72, 153;

  --color-primary:        #f97316;
  --color-primary-light:  #fb923c;
  --color-primary-dark:   #ea580c;
  --color-secondary:      #f59e0b;
  --color-accent:         #ec4899;

  --gradient-primary:     linear-gradient(135deg, #f97316 0%, #f59e0b 48%, #ec4899 100%);
  --gradient-card-left:   linear-gradient(145deg, #1c1312 0%, #5a250f 48%, #4a1638 100%);
  --gradient-security:    linear-gradient(145deg, #5a250f 0%, #f97316 50%, #ec4899 100%);
}

html[data-theme="market"] {
  --color-primary-rgb:    31, 122, 77;
  --color-secondary-rgb:  242, 96, 63;
  --color-accent-rgb:     70, 180, 119;

  --color-primary:        #1F7A4D;
  --color-primary-light:  #46B477;
  --color-primary-dark:   #175E3B;
  --color-secondary:      #F2603F;
  --color-accent:         #46B477;

  --gradient-primary:     linear-gradient(135deg, #1F7A4D 0%, #46B477 55%, #6ecf96 100%);
  --gradient-card-left:   linear-gradient(145deg, #0b1610 0%, #0f3a26 52%, #1a3810 100%);
  --gradient-security:    linear-gradient(145deg, #0f3a26 0%, #1F7A4D 50%, #46B477 100%);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background-color: var(--color-bg-void);
  color: var(--color-text-primary);
  color-scheme: dark;
}

html[data-mode="light"] {
  color-scheme: light;
}

/* ─────────────────────────────────────────────────────────
   LIGHT-SOFT — Helles Design mit warmem Grau-Hintergrund
   Hintergrund ist kein Weiß, sondern ein warmes Off-White/
   Beige-Ton — angenehmer für längere Arbeitssessions.
   ───────────────────────────────────────────────────────── */
html[data-mode="light-soft"] {
  --color-bg-void:        #e8e4de;
  --color-bg-deep:        #ede9e3;
  --color-bg-surface:     #f5f2ef;
  --color-bg-elevated:    #faf8f5;

  --color-text-primary:   #1a1714;
  --color-text-secondary: #5a5450;
  --color-text-muted:     #8a8480;

  --color-border:         rgba(30, 20, 10, 0.10);
  --color-border-focus:   rgba(var(--color-primary-rgb), 0.35);
  --color-border-subtle:  rgba(30, 20, 10, 0.06);

  --glass-bg:             rgba(245, 242, 239, 0.88);
  --glass-bg-lighter:     rgba(250, 248, 245, 0.92);
  --glass-border:         1px solid rgba(30, 20, 10, 0.08);
  --glass-shadow:         0 18px 48px rgba(30, 20, 10, 0.12), 0 0 0 1px rgba(var(--color-primary-rgb), 0.05);

  --surface-overlay-02:   rgba(30, 20, 10, 0.02);
  --surface-overlay-03:   rgba(30, 20, 10, 0.03);
  --surface-overlay-04:   rgba(30, 20, 10, 0.04);
  --surface-overlay-05:   rgba(30, 20, 10, 0.05);
  --surface-overlay-06:   rgba(30, 20, 10, 0.06);
  --surface-overlay-08:   rgba(30, 20, 10, 0.08);
  --surface-overlay-10:   rgba(30, 20, 10, 0.10);
  --surface-overlay-12:   rgba(30, 20, 10, 0.12);

  --shell-sidebar-bg:     rgba(232, 228, 222, 0.95);
  --shell-sidebar-border: rgba(30, 20, 10, 0.10);
  --form-panel-bg:        rgba(245, 242, 239, 0.88);
  --topbar-bg:            rgba(237, 233, 227, 0.92);
  --overlay-backdrop:     rgba(30, 20, 10, 0.22);

  --shadow-elevated:      0 24px 64px rgba(30, 20, 10, 0.16);
  --shadow-soft:          0 12px 32px rgba(30, 20, 10, 0.12);

  color-scheme: light;
}

/* ─────────────────────────────────────────────────────────
   DIM — Gedimmtes Design: zwischen Dunkel und Hell.
   Slate/Blau-Grau, weniger Kontrast als Dark — schont
   die Augen bei mittlerer Umgebungshelligkeit.
   ───────────────────────────────────────────────────────── */
html[data-mode="dim"] {
  --color-bg-void:        #1c1e2b;
  --color-bg-deep:        #21243a;
  --color-bg-surface:     #272a3d;
  --color-bg-elevated:    #2e3150;

  --color-text-primary:   #c8c9e0;
  --color-text-secondary: #8284a8;
  --color-text-muted:     #5a5c7a;

  --color-border:         var(--color-primary-soft-12);
  --color-border-focus:   rgba(var(--color-primary-rgb), 0.45);
  --color-border-subtle:  var(--color-primary-soft-05);

  --glass-bg:             rgba(39, 42, 61, 0.75);
  --glass-bg-lighter:     rgba(46, 49, 80, 0.65);
  --glass-border:         1px solid rgba(var(--color-primary-rgb), 0.18);
  --glass-shadow:         0 8px 32px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(var(--color-primary-rgb), 0.07);

  --surface-overlay-02:   rgba(255, 255, 255, 0.02);
  --surface-overlay-03:   rgba(255, 255, 255, 0.03);
  --surface-overlay-04:   rgba(255, 255, 255, 0.04);
  --surface-overlay-05:   rgba(255, 255, 255, 0.05);
  --surface-overlay-06:   rgba(255, 255, 255, 0.06);
  --surface-overlay-08:   rgba(255, 255, 255, 0.08);
  --surface-overlay-10:   rgba(255, 255, 255, 0.10);
  --surface-overlay-12:   rgba(255, 255, 255, 0.12);

  --shell-sidebar-bg:     rgba(28, 30, 43, 0.97);
  --shell-sidebar-border: var(--color-primary-soft-12);
  --form-panel-bg:        rgba(28, 30, 43, 0.65);
  --topbar-bg:            rgba(28, 30, 43, 0.90);
  --overlay-backdrop:     rgba(0, 0, 0, 0.45);

  --shadow-elevated:      0 24px 64px rgba(0, 0, 0, 0.40);
  --shadow-soft:          0 12px 40px rgba(0, 0, 0, 0.25);

  color-scheme: dark;
}

body {
  height: 100%;
  font-family: var(--font-primary);
  background-color: transparent;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Aurora Cosmic Default Theme ──────────────────────────────────────── */
html[data-theme="sarah-aurora"] {
  --color-accent-rgb:  63, 231, 255;
  --color-accent:      #3fe7ff;
  --gradient-primary:  linear-gradient(90deg, #3fe7ff 0%, #3d7bff 100%);
  --gradient-card-left: linear-gradient(160deg, #0b1430 0%, #060a18 100%);
}

html[data-mode="dark"][data-theme="sarah-aurora"],
html[data-mode="dim"][data-theme="sarah-aurora"] {
  --color-bg-void:     #040711;
  --color-bg-deep:     #070d1f;
  --color-bg-surface:  #0a1225;
  --color-bg-elevated: #0e1a38;

  --glass-bg:          rgba(14, 26, 52, 0.55);
  --glass-bg-lighter:  rgba(14, 26, 52, 0.80);
  --glass-border:      1px solid rgba(63, 231, 255, 0.18);
  --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(63, 231, 255, 0.08);
}

/* ── SARAH Aurora Lila ──────────────────────────────────────────────── */
html[data-theme="sarah-aurora-lila"] {
  --color-accent-rgb:  139, 107, 255;
  --color-accent:      #8b6bff;
  --gradient-primary:  linear-gradient(90deg, #8b6bff 0%, #3d7bff 100%);
  --gradient-card-left: linear-gradient(160deg, #0b1430 0%, #060a18 100%);
}

html[data-mode="dark"][data-theme="sarah-aurora-lila"],
html[data-mode="dim"][data-theme="sarah-aurora-lila"] {
  --color-bg-void:     #040711;
  --color-bg-deep:     #070d1f;
  --color-bg-surface:  #0a1225;
  --color-bg-elevated: #0e1a38;

  --glass-bg:          rgba(14, 26, 52, 0.55);
  --glass-bg-lighter:  rgba(14, 26, 52, 0.80);
  --glass-border:      1px solid rgba(139, 107, 255, 0.18);
  --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(139, 107, 255, 0.08);
}

/* ── Cosmic Checkboxes ─────────────────────────────────────────────── */
html[data-theme="sarah-aurora"] input[type="checkbox"],
html[data-theme="sarah-aurora-lila"] input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid rgba(63, 231, 255, 0.35);
  background: rgba(8, 16, 38, 0.70);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  vertical-align: middle;
}

html[data-theme="sarah-aurora-lila"] input[type="checkbox"] {
  border-color: rgba(139, 107, 255, 0.35);
}

html[data-theme="sarah-aurora"] input[type="checkbox"]:checked,
html[data-theme="sarah-aurora-lila"] input[type="checkbox"]:checked {
  background: rgba(63, 231, 255, 0.15);
  border-color: var(--color-accent);
  box-shadow: 0 0 8px rgba(63, 231, 255, 0.30);
}

html[data-theme="sarah-aurora-lila"] input[type="checkbox"]:checked {
  background: rgba(139, 107, 255, 0.15);
  box-shadow: 0 0 8px rgba(139, 107, 255, 0.30);
}

html[data-theme="sarah-aurora"] input[type="checkbox"]:checked::before,
html[data-theme="sarah-aurora-lila"] input[type="checkbox"]:checked::before {
  content: '';
  display: block;
  width: 11px;
  height: 7px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg) translateY(-2px);
}

html[data-theme="sarah-aurora"] input[type="checkbox"]:focus-visible,
html[data-theme="sarah-aurora-lila"] input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Cosmic Toggle Switch ──────────────────────────────────────────── */
.cosmic-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}

.cosmic-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cosmic-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: rgba(8, 16, 38, 0.80);
  border: 1px solid rgba(var(--color-accent-rgb, 63 231 255) / 0.35);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}

.cosmic-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: left 0.25s, background 0.25s, box-shadow 0.25s;
}

.cosmic-toggle input:checked + .cosmic-toggle__track {
  background: rgba(var(--color-accent-rgb, 63 231 255) / 0.20);
  border-color: var(--color-accent);
}

.cosmic-toggle input:checked + .cosmic-toggle__track::after {
  left: 22px;
  background: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent);
}

.cosmic-toggle input:focus-visible + .cosmic-toggle__track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Cosmic Range Slider ───────────────────────────────────────────── */
.cosmic-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)) var(--p, 70%),
    rgba(255, 255, 255, 0.08) var(--p, 70%)
  );
  outline: none;
  cursor: pointer;
}

.cosmic-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 14px var(--color-accent);
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.cosmic-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 14px var(--color-accent);
  cursor: pointer;
  border: none;
  transition: box-shadow 0.2s;
}

@media (hover: hover) {
  .cosmic-slider:hover::-webkit-slider-thumb {
    box-shadow: 0 0 20px var(--color-accent);
  }
  .cosmic-slider:hover::-moz-range-thumb {
    box-shadow: 0 0 20px var(--color-accent);
  }
}

/* ── Globale Link-Utility ─────────────────────────────────────────── */
/* Alle semantischen Action-Links erben automatisch die Theme-Akzentfarbe.
   Neue Module: .ds-link auf <a>-Elemente anwenden — fertig. */
.ds-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

@media (hover: hover) {
  .ds-link:hover {
    opacity: 1;
    text-decoration: none;
  }
}