/**
 * K.I.R.A. Theme-System
 * Zentralisierte Design-Variablen für alle Seiten
 * Themes: dark (Standard), light, contrast
 * Font-Sizes: small, normal, large, xlarge
 */

/* ─── Font-Size Scaling ─────────────────────────────── */

[data-font-size="small"] { font-size: 13px; }
[data-font-size="normal"] { font-size: 15px; }
[data-font-size="large"] { font-size: 17px; }
[data-font-size="xlarge"] { font-size: 19px; }

[data-font-size="small"] .pj-btn, [data-font-size="small"] .pj-tab,
[data-font-size="small"] .mail-compose-btn, [data-font-size="small"] .ld-filter-btn {
  font-size: 0.65rem;
}
[data-font-size="large"] .pj-btn, [data-font-size="large"] .pj-tab,
[data-font-size="large"] .mail-compose-btn, [data-font-size="large"] .ld-filter-btn {
  font-size: 0.8rem;
}
[data-font-size="xlarge"] .pj-btn, [data-font-size="xlarge"] .pj-tab,
[data-font-size="xlarge"] .mail-compose-btn, [data-font-size="xlarge"] .ld-filter-btn {
  font-size: 0.9rem;
}

/* ─── Dark Theme (Standard) ─────────────────────────── */

[data-theme="dark"], :root {
  --bg: #0a0e17;
  --bg-card: #0f1420;
  --bg-hover: #141c2e;
  --border: #1a2a44;
  --border-hover: #2a3a5a;
  --glow: #00d4ff;
  --text: #c8d6e5;
  --text-dim: #5a6a7a;
  --text-bright: #e8f0f8;
  --success: #2ed573;
  --orange: #f39c12;
  --danger: #ff4757;
  --mail-personal: #00d4ff;
  --mail-agency: #00c853;
  --shadow: rgba(0,0,0,0.3);
  --input-bg: #0a0e17;
  --grid-line: rgba(0,212,255,0.02);
  --skeleton-from: #0f1420;
  --skeleton-via: rgba(0,212,255,0.03);
}

/* ─── Light Theme ───────────────────────────────────── */

[data-theme="light"] {
  --bg: #f0f2f5;
  --bg-card: #ffffff;
  --bg-hover: #e8ebf0;
  --border: #d0d5dd;
  --border-hover: #b0b8c8;
  --glow: #0077b6;
  --text: #344054;
  --text-dim: #667085;
  --text-bright: #101828;
  --success: #12b76a;
  --orange: #dc6803;
  --danger: #d92d20;
  --mail-personal: #0077b6;
  --mail-agency: #039855;
  --shadow: rgba(0,0,0,0.08);
  --input-bg: #ffffff;
  --grid-line: rgba(0,0,0,0.02);
  --skeleton-from: #e8ebf0;
  --skeleton-via: rgba(0,0,0,0.03);
}

[data-theme="light"] body { color: var(--text); background: var(--bg); }
[data-theme="light"] body::before { background: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 50px 50px; }

/* Light Theme: Skeleton */
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-via) 50%, var(--skeleton-from) 75%) !important;
  background-size: 200% 100%;
}

/* Light Theme: Inputs */
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Light Theme: Topbar */
[data-theme="light"] .kira-topbar { background: #ffffff; border-bottom-color: var(--border); }
[data-theme="light"] .kira-nav-dropdown { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .kira-logo { color: var(--glow); }

/* Light Theme: Footer */
[data-theme="light"] .kira-footer { background: #ffffff; border-top-color: var(--border); color: var(--text-dim); }

/* Light Theme: Cards & Panels */
[data-theme="light"] .tile, [data-theme="light"] .pj-col,
[data-theme="light"] .mail-sidebar, [data-theme="light"] .pj-detail-left,
[data-theme="light"] .pj-detail-right, [data-theme="light"] .pj-card,
[data-theme="light"] .kt-detail, [data-theme="light"] .ld-panel {
  background: var(--bg-card);
  border-color: var(--border);
}

/* Light Theme: Modals */
[data-theme="light"] .mail-modal, [data-theme="light"] .pj-wizard {
  background: var(--bg-card);
  border-color: var(--border);
}

/* Light Theme: Navigation */
[data-theme="light"] .kira-topbar { background: rgba(255,255,255,0.95); }
[data-theme="light"] .kira-nav-dropdown { background: #ffffff; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
[data-theme="light"] .kira-nav-dropdown a { color: var(--text); }
[data-theme="light"] .kira-nav-dropdown a:hover { color: var(--glow); background: rgba(0,119,182,0.08); }
[data-theme="light"] .kira-nav-dropdown a.active { color: var(--glow); background: rgba(0,119,182,0.1); }
[data-theme="light"] .kira-nav-trigger { color: var(--text); }
[data-theme="light"] .kira-nav-trigger:hover, [data-theme="light"] .kira-nav-trigger.active { color: var(--glow); }
[data-theme="light"] .kira-logo { color: var(--glow); }

/* Light Theme: Links + Hover überall */
[data-theme="light"] a { color: var(--glow); }
[data-theme="light"] .kira-push-btn { border-color: var(--border); color: var(--text-dim); }
[data-theme="light"] .kira-push-btn:hover { border-color: var(--glow); color: var(--glow); }

/* Light Theme: Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); }

/* Light Theme: body::before Grid */
[data-theme="light"] body::before { background: linear-gradient(rgba(0,0,0,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.015) 1px, transparent 1px) !important; background-size: 50px 50px !important; }

/* ─── High Contrast Theme ───────────────────────────── */

[data-theme="contrast"] {
  --bg: #000000;
  --bg-card: #0a0a0a;
  --bg-hover: #1a1a1a;
  --border: #333333;
  --border-hover: #555555;
  --glow: #00e5ff;
  --text: #e0e0e0;
  --text-dim: #888888;
  --text-bright: #ffffff;
  --success: #00ff88;
  --orange: #ffaa00;
  --danger: #ff3333;
  --input-bg: #0a0a0a;
  --grid-line: rgba(0,229,255,0.03);
  --skeleton-from: #0a0a0a;
  --skeleton-via: rgba(0,229,255,0.05);
}