/* Bionic OS Lab — Skin-System (1:1 aus src/client/theme/skins.ts + skin-accents.ts).
   Default: Teenage Engineering (auf :root). Andere Skins via [data-skin="…"]. */

/* ── Default = Teenage Engineering ── */
:root,
[data-skin="teenage-engineering"] {
  --skin-bg: #F7F5F0;
  --skin-bg-secondary: #F7F5F0;
  --skin-bg-pattern: linear-gradient(#e5e5e5 1px, transparent 1px), linear-gradient(90deg, #e5e5e5 1px, transparent 1px);
  --skin-card-bg: #FFFFFF;
  --skin-card-border: 2px solid #000000;
  --skin-card-shadow: 2px 2px 0px 0px #000000;
  --skin-card-radius: 4px;
  --skin-card-hover-shadow: 4px 4px 0px 0px #000000;
  --skin-card-hover-transform: translateY(-2px);
  --skin-card-active-transform: translate(2px, 2px);
  --skin-text-primary: #111418;
  --skin-text-secondary: #6b7280;
  --skin-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --skin-font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
  --skin-heading-letter-spacing: 0.2em;
  --skin-title-transform: uppercase;
  --skin-title-letter-spacing: -0.025em;
  --skin-label-transform: uppercase;
  --skin-icon-radius: 50%;
  --skin-icon-border: 2px solid #000000;
  --skin-divider: 2px solid #000000;
  --skin-badge-radius: 0px;
  --c-accent: #000000;
  --c-accent-hover: #262626;
  --c-accent-soft: rgba(0, 0, 0, 0.08);
  --c-accent-text: #000000;
  --c-on-accent: #FFFFFF;
  --c-border-color: #000000;
}

[data-skin="professional"] {
  --skin-bg: #f5f7f8;
  --skin-bg-secondary: #FFFFFF;
  --skin-bg-pattern: none;
  --skin-card-bg: #FFFFFF;
  --skin-card-border: 1px solid #f1f5f9;
  --skin-card-shadow: 0 1px 3px 0 rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05);
  --skin-card-radius: 16px;
  --skin-card-hover-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --skin-card-hover-transform: translateY(-2px);
  --skin-card-active-transform: translateY(0);
  --skin-text-primary: #0f172a;
  --skin-text-secondary: #64748b;
  --skin-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --skin-font-family-mono: 'SF Mono', ui-monospace, monospace;
  --skin-heading-letter-spacing: -0.025em;
  --skin-title-transform: none;
  --skin-title-letter-spacing: normal;
  --skin-label-transform: none;
  --skin-icon-radius: 16px;
  --skin-icon-border: none;
  --skin-divider: 1px solid #e2e8f0;
  --skin-badge-radius: 9999px;
  --c-accent: #2563eb;
  --c-accent-hover: #1d4ed8;
  --c-accent-soft: rgba(37, 99, 235, 0.10);
  --c-accent-text: #2563eb;
  --c-on-accent: #FFFFFF;
  --c-border-color: #e2e8f0;
}

[data-skin="broody"] {
  --skin-bg: #0D0F0D;
  --skin-bg-secondary: #121412;
  --skin-bg-pattern: repeating-linear-gradient(0deg, rgba(0,255,65,0.03) 0px, transparent 1px, transparent 3px), radial-gradient(ellipse at 30% 60%, rgba(0,255,65,0.04) 0%, transparent 50%), radial-gradient(ellipse at 70% 30%, rgba(255,179,71,0.03) 0%, transparent 50%);
  --skin-card-bg: #151A15;
  --skin-card-border: 1px solid rgba(0, 255, 65, 0.25);
  --skin-card-shadow: 0 0 12px rgba(0, 255, 65, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4);
  --skin-card-radius: 0px;
  --skin-card-hover-shadow: 0 0 20px rgba(0, 255, 65, 0.18), 0 4px 12px rgba(0, 0, 0, 0.5);
  --skin-card-hover-transform: translateY(-2px);
  --skin-card-active-transform: translateY(0);
  --skin-text-primary: #C8E6C8;
  --skin-text-secondary: #9E9E8E;
  --skin-font-family: 'Space Mono', 'Space Grotesk', monospace;
  --skin-font-family-mono: 'Space Mono', monospace;
  --skin-heading-letter-spacing: 0.06em;
  --skin-title-transform: uppercase;
  --skin-title-letter-spacing: 0.06em;
  --skin-label-transform: uppercase;
  --skin-icon-radius: 0px;
  --skin-icon-border: 1px solid rgba(0, 255, 65, 0.25);
  --skin-divider: 1px solid rgba(0, 255, 65, 0.15);
  --skin-badge-radius: 0px;
  --c-accent: #00FF41;
  --c-accent-hover: #00E03A;
  --c-accent-soft: rgba(0, 255, 65, 0.10);
  --c-accent-text: #00FF41;
  --c-on-accent: #0D0F0D;
  --c-border-color: rgba(0, 255, 65, 0.25);
}

[data-skin="bionic"] {
  --skin-bg: #110a2b;
  --skin-bg-secondary: #1a1040;
  --skin-bg-pattern: radial-gradient(ellipse at 20% 50%, rgba(100, 45, 249, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(255, 36, 214, 0.08) 0%, transparent 50%);
  --skin-card-bg: #1a1040;
  --skin-card-border: 1px solid rgba(100, 45, 249, 0.3);
  --skin-card-shadow: 0 0 12px rgba(100, 45, 249, 0.12), 0 2px 8px rgba(0, 0, 0, 0.3);
  --skin-card-radius: 12px;
  --skin-card-hover-shadow: 0 0 20px rgba(255, 36, 214, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4);
  --skin-card-hover-transform: translateY(-2px);
  --skin-card-active-transform: translateY(0);
  --skin-text-primary: #ffffff;
  --skin-text-secondary: rgba(255, 255, 255, 0.7);
  --skin-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --skin-font-family-mono: 'JetBrains Mono', monospace;
  --skin-heading-letter-spacing: -0.02em;
  --skin-title-transform: none;
  --skin-title-letter-spacing: -0.02em;
  --skin-label-transform: uppercase;
  --skin-icon-radius: 10px;
  --skin-icon-border: 1px solid rgba(100, 45, 249, 0.25);
  --skin-divider: 1px solid rgba(255, 255, 255, 0.1);
  --skin-badge-radius: 8px;
  --c-accent: #642df9;
  --c-accent-hover: #5526d6;
  --c-accent-soft: rgba(100, 45, 249, 0.12);
  --c-accent-text: #9D77FF;
  --c-on-accent: #FFFFFF;
  --c-border-color: rgba(100, 45, 249, 0.3);
}

/* ── Skin switcher (gemeinsam) ── */
.skin-switch { display: inline-flex; gap: 6px; align-items: center; }
.skin-switch button {
  width: 26px; height: 26px; border-radius: 999px; cursor: pointer; padding: 0;
  border: 2px solid var(--c-border-color); background: var(--swatch, #ccc);
  transition: transform .15s ease, box-shadow .15s ease; position: relative;
}
.skin-switch button[data-s="professional"] { --swatch: #2563eb; }
.skin-switch button[data-s="teenage-engineering"] { --swatch: #F7F5F0; }
.skin-switch button[data-s="broody"] { --swatch: #0D0F0D; }
.skin-switch button[data-s="bionic"] { --swatch: linear-gradient(135deg,#642df9,#ff24d6); }
.skin-switch button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--skin-bg), 0 0 0 4px var(--c-accent); transform: scale(1.08); }