/* ═══════════════════════════════════════════════════════════════
   TOOL-HUB – DEFAULT THEME  (Light)
   Only CSS Custom Properties – no structural rules here.
   Load order: default.css → dark.css → app.css
═══════════════════════════════════════════════════════════════ */

/* ── Light Base ── */
[data-theme="light"] {
  --th-body-bg:       #eef2ff;

  --th-sidebar-bg:    rgba(255,255,255,0.82);
  --th-sidebar-bd:    rgba(37,99,235,0.08);
  --th-sidebar-blur:  16px;

  --th-topbar-bg:     rgba(255,255,255,0.80);
  --th-topbar-bd:     rgba(37,99,235,0.07);

  --th-card-bg:       rgba(255,255,255,0.75);
  --th-card-bd:       rgba(37,99,235,0.09);
  --th-card-blur:     12px;

  --th-text:          #0f172a;
  --th-text-2:        #334155;
  --th-text-muted:    #64748b;
  --th-text-faint:    #94a3b8;

  --th-divider:       rgba(37,99,235,0.06);
  --th-divider-hard:  rgba(37,99,235,0.1);
  --th-border:        rgba(37,99,235,0.1);

  --th-shadow:        0 2px 8px rgba(37,99,235,0.08), 0 12px 32px rgba(37,99,235,0.06);
  --th-shadow-sm:     0 1px 4px rgba(37,99,235,0.08);
  --th-shadow-card:   0 1px 3px rgba(37,99,235,0.06), 0 8px 24px rgba(37,99,235,0.05);

  --th-input-bg:      rgba(255,255,255,0.70);
  --th-input-bd:      rgba(37,99,235,0.15);

  --th-row-hover:     rgba(37,99,235,0.04);
  --th-bg-soft:       rgba(37,99,235,0.04);
  --th-code-bg:       rgba(0,0,0,0.04);

  --th-radius:        8px;
  --th-radius-lg:     12px;

  /* Login-Hintergrund */
  --th-login-bg:      linear-gradient(175deg,#c7d8ff 0%,#dce8ff 30%,#eef3ff 60%,#ffffff 100%);
  --th-login-icon:    rgba(37,99,235,0.07);
  --th-login-glow:    rgba(37,99,235,0.10);
}

/* ── Tool Color Palettes (Light) ──
   Each block overrides --th-body-bg with a matching tint
   so the whole page feels "of one color".
   Shadows shift too so they always match the accent.
─────────────────────────────────────────────────────────── */

/* BLUE – default */
[data-tool-color="blue"][data-theme="light"] {
  --tc:             #2563eb;
  --tc-soft:        rgba(37,99,235,.10);
  --tc-mid:         rgba(37,99,235,.18);
  --tc-text:        #1d4ed8;
  --tc-grad:        linear-gradient(135deg,#3b82f6,#06b6d4);
  --th-body-bg:     #eef2ff;
  --th-sidebar-bd:  rgba(37,99,235,0.08);
  --th-card-bd:     rgba(37,99,235,0.09);
  --th-divider:     rgba(37,99,235,0.06);
  --th-divider-hard:rgba(37,99,235,0.10);
  --th-border:      rgba(37,99,235,0.10);
  --th-input-bd:    rgba(37,99,235,0.15);
  --th-row-hover:   rgba(37,99,235,0.04);
  --th-bg-soft:     rgba(37,99,235,0.04);
  --th-shadow:      0 2px 8px rgba(37,99,235,0.09), 0 12px 32px rgba(37,99,235,0.07);
  --th-shadow-card: 0 1px 3px rgba(37,99,235,0.06), 0 8px 24px rgba(37,99,235,0.05);
}

/* TEAL */
[data-tool-color="teal"][data-theme="light"] {
  --tc:             #0d9488;
  --tc-soft:        rgba(13,148,136,.10);
  --tc-mid:         rgba(13,148,136,.18);
  --tc-text:        #0f766e;
  --tc-grad:        linear-gradient(135deg,#14b8a6,#059669);
  --th-body-bg:     #f0fdfa;
  --th-sidebar-bd:  rgba(13,148,136,0.08);
  --th-card-bd:     rgba(13,148,136,0.09);
  --th-divider:     rgba(13,148,136,0.06);
  --th-divider-hard:rgba(13,148,136,0.10);
  --th-border:      rgba(13,148,136,0.10);
  --th-input-bd:    rgba(13,148,136,0.15);
  --th-row-hover:   rgba(13,148,136,0.04);
  --th-bg-soft:     rgba(13,148,136,0.04);
  --th-shadow:      0 2px 8px rgba(13,148,136,0.09), 0 12px 32px rgba(13,148,136,0.07);
  --th-shadow-card: 0 1px 3px rgba(13,148,136,0.06), 0 8px 24px rgba(13,148,136,0.05);
}

/* VIOLET */
[data-tool-color="violet"][data-theme="light"] {
  --tc:             #7c3aed;
  --tc-soft:        rgba(124,58,237,.10);
  --tc-mid:         rgba(124,58,237,.18);
  --tc-text:        #6d28d9;
  --tc-grad:        linear-gradient(135deg,#8b5cf6,#db2777);
  --th-body-bg:     #f5f3ff;
  --th-sidebar-bd:  rgba(124,58,237,0.08);
  --th-card-bd:     rgba(124,58,237,0.09);
  --th-divider:     rgba(124,58,237,0.06);
  --th-divider-hard:rgba(124,58,237,0.10);
  --th-border:      rgba(124,58,237,0.10);
  --th-input-bd:    rgba(124,58,237,0.15);
  --th-row-hover:   rgba(124,58,237,0.04);
  --th-bg-soft:     rgba(124,58,237,0.04);
  --th-shadow:      0 2px 8px rgba(124,58,237,0.09), 0 12px 32px rgba(124,58,237,0.07);
  --th-shadow-card: 0 1px 3px rgba(124,58,237,0.06), 0 8px 24px rgba(124,58,237,0.05);
}

/* ORANGE */
[data-tool-color="orange"][data-theme="light"] {
  --tc:             #ea580c;
  --tc-soft:        rgba(234,88,12,.10);
  --tc-mid:         rgba(234,88,12,.18);
  --tc-text:        #c2410c;
  --tc-grad:        linear-gradient(135deg,#f97316,#eab308);
  --th-body-bg:     #fff7ed;
  --th-sidebar-bd:  rgba(234,88,12,0.08);
  --th-card-bd:     rgba(234,88,12,0.09);
  --th-divider:     rgba(234,88,12,0.06);
  --th-divider-hard:rgba(234,88,12,0.10);
  --th-border:      rgba(234,88,12,0.10);
  --th-input-bd:    rgba(234,88,12,0.15);
  --th-row-hover:   rgba(234,88,12,0.04);
  --th-bg-soft:     rgba(234,88,12,0.04);
  --th-shadow:      0 2px 8px rgba(234,88,12,0.09), 0 12px 32px rgba(234,88,12,0.07);
  --th-shadow-card: 0 1px 3px rgba(234,88,12,0.06), 0 8px 24px rgba(234,88,12,0.05);
}

/* ROSE */
[data-tool-color="rose"][data-theme="light"] {
  --tc:             #e11d48;
  --tc-soft:        rgba(225,29,72,.10);
  --tc-mid:         rgba(225,29,72,.18);
  --tc-text:        #be123c;
  --tc-grad:        linear-gradient(135deg,#f43f5e,#9333ea);
  --th-body-bg:     #fff1f2;
  --th-sidebar-bd:  rgba(225,29,72,0.08);
  --th-card-bd:     rgba(225,29,72,0.09);
  --th-divider:     rgba(225,29,72,0.06);
  --th-divider-hard:rgba(225,29,72,0.10);
  --th-border:      rgba(225,29,72,0.10);
  --th-input-bd:    rgba(225,29,72,0.15);
  --th-row-hover:   rgba(225,29,72,0.04);
  --th-bg-soft:     rgba(225,29,72,0.04);
  --th-shadow:      0 2px 8px rgba(225,29,72,0.09), 0 12px 32px rgba(225,29,72,0.07);
  --th-shadow-card: 0 1px 3px rgba(225,29,72,0.06), 0 8px 24px rgba(225,29,72,0.05);
}

/* ── Global Status Colors ── */
:root {
  --c-success:      #16a34a;
  --c-success-soft: rgba(22,163,74,.10);
  --c-warning:      #d97706;
  --c-warning-soft: rgba(217,119,6,.10);
  --c-danger:       #dc2626;
  --c-danger-soft:  rgba(220,38,38,.10);
  --c-info:         #0891b2;
  --c-info-soft:    rgba(8,145,178,.10);
}