/* portal/css/style.css */

/* Dunkeldesign (Standard) */
:root,
html.dark {
  --bg-primary: #020617;       /* slate-950 */
  --bg-secondary: #0f172a;     /* slate-900 */
  --bg-tertiary: #1e293b;      /* slate-800 */
  --bg-card-hover: #1e293b;    /* slate-800 */
  
  --text-main: #f8fafc;        /* slate-50 */
  --text-muted: #94a3b8;       /* slate-400 */
  --text-subtle: #64748b;      /* slate-500 */
  
  --border-color: #1e293b;     /* slate-800 */
  --border-hover: #334155;     /* slate-700 */
  --shadow-portal: rgba(0, 0, 0, 0.4);
}

/* Helldesign - Knackiger Kontrast & weiße Kacheln auf hellgrauem Grund */
html.light {
  --bg-primary: #f1f5f9;       /* slate-100 (Hintergrund) */
  --bg-secondary: #ffffff;     /* weiß (Kacheln) */
  --bg-tertiary: #f8fafc;      /* slate-50 (Kacheln-Innenboxen) */
  --bg-card-hover: #f8fafc;    /* slate-50 */
  
  --text-main: #0f172a;        /* slate-900 (Dunkle Haupttexte) */
  --text-muted: #475569;       /* slate-600 */
  --text-subtle: #64748b;      /* slate-500 */
  
  --border-color: #cbd5e1;     /* slate-300 (Saubere Kachel-Rahmen) */
  --border-hover: #94a3b8;     /* slate-400 */
  --shadow-portal: rgba(15, 23, 42, 0.08);
}

/* Sanfte Farbübergänge */
body, 
div, 
header, 
section, 
input, 
button {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Portal Hilfsklassen */
.bg-portal-main { background-color: var(--bg-primary); }
.bg-portal-card { background-color: var(--bg-secondary); }
.bg-portal-sub { background-color: var(--bg-tertiary); }

.text-portal-main { color: var(--text-main); }
.text-portal-muted { color: var(--text-muted); }
.text-portal-subtle { color: var(--text-subtle); }

.border-portal { border-color: var(--border-color); }

.border-portal-hover:hover { 
  border-color: var(--border-hover); 
  background-color: var(--bg-card-hover);
}

.shadow-portal {
  box-shadow: 0 10px 25px -5px var(--shadow-portal);
}