/* ============================================================
   designs.css — zusätzliche Designs für den Umschalter im Profil.
   Liegt NACH klipwerk.css im <head>.

   Aufbau: klipwerk.css bringt seit dem Umbau die gemeinsame
   Komponenten-Schicht für ALLE --hf-/--kw-Token-basierten Designs mit
   (`html:not([data-design="klassisch"])`). Hier stehen deshalb nur
   noch die Token-Sätze je Design plus das, was die jeweilige
   Richtung wirklich anders macht. „klassisch" bleibt unberührt.

   Ausnahme seit „Werkbank bei Nacht" (Richtung A „Werkstatt", werkbank.css):
   dieses Design hat eine EIGENE, --hf-/--kw-token-freie Komponenten-Schicht
   und ist deshalb in klipwerk.css zusätzlich per `:not([data-design="werkbank"])`
   aus der gemeinsamen Schicht ausgenommen — sonst gewinnen dort einzelne
   Regeln (höhere Selektor-Spezifität) gegen werkbank.css und referenzieren
   in diesem Design undefinierte --kw-*-Tokens (Hintergrund fällt auf
   transparent zurück, „NEU"-Stempel unsichtbar im Dunkelmodus — Fund vom
   08.09., siehe werkbank.css-Kopfkommentar).
   ============================================================ */

/* ============================================================
   1. WERKSTATT — die nüchterne Arbeitsfläche
   Gleiche Palette wie klipwerk (es sind unsere Farben), aber
   dichter gesetzt und mit strenger Orange-Disziplin: Signal nur
   für Wortmarke und den auslösenden Knopf, sonst Ink.
   ============================================================ */
html[data-design="werkstatt"] {
  --hf-primary: #1c1b17;
  --hf-primary-dark: #3a382f;
  --hf-primary-light: #f0ede4;
  --hf-accent: #1c1b17;              /* Akzent IST Ink — das ist der Kern */
  --hf-accent-light: rgba(28, 27, 23, 0.06);
  --hf-success: oklch(0.42 0.11 150);
  --hf-success-light: oklch(0.95 0.03 150);
  --hf-warning: oklch(0.48 0.1 75);
  --hf-warning-light: oklch(0.95 0.04 85);
  --hf-danger: oklch(0.44 0.15 25);
  --hf-danger-light: oklch(0.94 0.03 25);
  --hf-sidebar: #f2efe8;
  --hf-sidebar-active: #e6e2d7;
  --hf-border: #d2ccbe;
  --hf-text: #1c1b17;
  --hf-text-muted: #504d45;
  --hf-background: #f7f5f0;
  --hf-card: #ffffff;
  --hf-radius: 4px;
  --hf-shadow: none;
  --hf-focus-ring: rgba(28, 27, 23, 0.2);
  --kw-signal: #e34a1e;              /* bleibt reserviert für Scannen + Marke */
  --kw-signal-hover: #c73d15;
}
html[data-design="werkstatt"][data-theme="dark"] {
  --hf-primary: #f0ede4;
  --hf-primary-dark: #ffffff;
  --hf-primary-light: #2c2a23;
  --hf-accent: #f0ede4;
  --hf-accent-light: rgba(240, 237, 228, 0.08);
  --hf-success: oklch(0.78 0.1 150);
  --hf-success-light: oklch(0.32 0.04 150);
  --hf-warning: oklch(0.8 0.1 80);
  --hf-warning-light: oklch(0.32 0.05 80);
  --hf-danger: oklch(0.74 0.12 25);
  --hf-danger-light: oklch(0.32 0.05 25);
  --hf-sidebar: #16150f;
  --hf-sidebar-active: #2c2a23;
  --hf-border: #3b382f;
  --hf-text: #f0ede4;
  --hf-text-muted: #b5afa2;
  --hf-background: #191813;
  --hf-card: #211f19;
  --hf-focus-ring: rgba(240, 237, 228, 0.25);
  --kw-signal: #f26534;
  --kw-signal-hover: #ff7a4a;
}

/* Dichte: kleinere Grundschrift, engere Karten, Trennung über Ränder. */
html[data-design="werkstatt"] body { font-size: 14px; line-height: 1.5; }
html[data-design="werkstatt"] .card { padding: 13px 15px; }
html[data-design="werkstatt"] .page-head h1 { font-size: 24px; }
html[data-design="werkstatt"] .hook { font-size: 17px; }
html[data-design="werkstatt"] .pill { border-radius: 3px; font-size: 11.5px; }
/* Reiter-Unterstreichung in Ink statt Signal — Orange bleibt dem Knopf. */
html[data-design="werkstatt"] .tab.active { border-bottom-color: var(--hf-text); }
html[data-design="werkstatt"] .posting-paket .hashtags,
html[data-design="werkstatt"] .strat-mix .pct { color: var(--hf-text); }
html[data-design="werkstatt"] .idee-form input:focus,
html[data-design="werkstatt"] .add-form input:focus,
html[data-design="werkstatt"] .profile-form input:focus,
html[data-design="werkstatt"] .profile-form textarea:focus,
html[data-design="werkstatt"] .rating-notiz:focus {
  border-color: var(--hf-text);
  box-shadow: 0 0 0 3px var(--hf-focus-ring);
}

/* ============================================================
   2. NACHTSCHICHT — dunkel als Grundzustand, Signal als Lichtquelle
   Wird beim Umschalten zusammen mit dem dunklen Modus gesetzt.
   ============================================================ */
/* Tokens 1:1 aus dem Entwurf übernommen — sie sind identisch mit den
   Dunkel-Tokens des klipwerk-CI. Neu ist `--hf-card-2`: eine ZWEITE
   Flächenebene. Sie trägt die Weichheit, weil Verschachtelung dadurch
   über Helligkeit statt über harte Ränder entsteht. */
html[data-design="nachtschicht"] {
  --hf-primary: #f0ede4;
  --hf-primary-dark: #ffffff;
  --hf-primary-light: #2c2a23;
  --hf-accent: #f26534;
  --hf-accent-light: rgba(242, 101, 52, 0.16);
  --hf-success: oklch(0.78 0.1 150);
  --hf-success-light: oklch(0.32 0.04 150);
  --hf-warning: oklch(0.8 0.1 80);
  --hf-warning-light: oklch(0.32 0.05 80);
  --hf-danger: oklch(0.74 0.12 25);
  --hf-danger-light: oklch(0.32 0.05 25);
  --hf-sidebar: #15140f;
  --hf-sidebar-active: #2c2a23;
  --hf-border: #35332b;
  --hf-text: #f0ede4;
  --hf-text-muted: #b5afa2;
  --hf-background: #191813;
  --hf-card: #23211b;
  --hf-card-2: #2c2a23;
  --hf-radius: 6px;
  --hf-radius-lg: 14px;
  --hf-shadow: none;
  --hf-focus-ring: rgba(242, 101, 52, 0.45);
  --kw-signal: #f26534;
  --kw-signal-hover: #ff7a4a;
}
/* Heller Modus bleibt vollwertig — dieselbe Weichheit auf hellem Papier. */
html[data-design="nachtschicht"][data-theme="light"] {
  --hf-primary: #1c1b17;
  --hf-primary-light: #f0ede4;
  --hf-accent: #e34a1e;
  --hf-accent-light: rgba(227, 74, 30, 0.09);
  --hf-success: oklch(0.42 0.11 150);
  --hf-success-light: oklch(0.95 0.03 150);
  --hf-warning: oklch(0.48 0.1 75);
  --hf-warning-light: oklch(0.95 0.04 85);
  --hf-danger: oklch(0.44 0.15 25);
  --hf-danger-light: oklch(0.94 0.03 25);
  --hf-sidebar: #f2efe8;
  --hf-sidebar-active: #f0ede4;
  --hf-border: #d9d4c8;
  --hf-text: #1c1b17;
  --hf-text-muted: #504d45;
  --hf-background: #f7f5f0;
  --hf-card: #ffffff;
  --hf-card-2: #f0ede4;
  --hf-focus-ring: rgba(227, 74, 30, 0.3);
  --kw-signal: #e34a1e;
  --kw-signal-hover: #c73d15;
}

/* --- Weichheit: große Radien, vollrunde Pillen, zweite Flächenebene ---- */
html[data-design="nachtschicht"] .card,
html[data-design="nachtschicht"] .voice-box,
html[data-design="nachtschicht"] .besuch-banner { border-radius: var(--hf-radius-lg); }
html[data-design="nachtschicht"] .pill,
html[data-design="nachtschicht"] .ht-chip,
html[data-design="nachtschicht"] .fit { border-radius: 999px; padding-left: 11px; padding-right: 11px; }
html[data-design="nachtschicht"] .btn,
html[data-design="nachtschicht"] .btn-scan,
html[data-design="nachtschicht"] .theme-toggle { border-radius: 999px; }
/* Verschachteltes liegt eine Stufe heller statt hinter einem Rand. */
html[data-design="nachtschicht"] .variant,
html[data-design="nachtschicht"] .posting-paket,
html[data-design="nachtschicht"] .legend-group {
  background: var(--hf-card-2);
  border-color: transparent;
  border-radius: var(--hf-radius-lg);
}
html[data-design="nachtschicht"] .card { padding: 20px 22px; }
html[data-design="nachtschicht"] .sidebar nav a { border-radius: 999px; }

/* --- Schrift: Space Grotesk trägt mehr, Kleinlabels bekommen Laufweite -- */
html[data-design="nachtschicht"] body { line-height: 1.62; }
html[data-design="nachtschicht"] .pill,
html[data-design="nachtschicht"] .fit,
html[data-design="nachtschicht"] .tab,
html[data-design="nachtschicht"] .rate-btn,
html[data-design="nachtschicht"] .chan-stats {
  font-family: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-design="nachtschicht"] .nav-group {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}
html[data-design="nachtschicht"] .page-head h1 { font-size: 30px; letter-spacing: -0.025em; }
html[data-design="nachtschicht"] .hook { font-size: 20px; line-height: 1.28; }

/* --- Die eine Lichtquelle: weiches Glühen am Kopf der Seitenleiste ------ */
html[data-design="nachtschicht"] .sidebar {
  background-image: radial-gradient(120% 70% at 0% 0%, var(--hf-accent-light) 0%, transparent 60%);
}
html[data-design="nachtschicht"] .sidebar nav a.active {
  box-shadow: inset 2px 0 0 var(--kw-signal);
}

/* ============================================================
   3. SIGNAL — Farbe trägt die Struktur, nicht nur den Akzent
   Orange als Fläche für aktive Zustände und Handlungen.
   ============================================================ */
html[data-design="signal"] {
  --hf-primary: #e34a1e;
  --hf-primary-dark: #c73d15;
  --hf-primary-light: #fdeee9;
  --hf-accent: #e34a1e;
  --hf-accent-light: rgba(227, 74, 30, 0.11);
  --hf-success: oklch(0.42 0.11 150);
  --hf-success-light: oklch(0.95 0.03 150);
  --hf-warning: oklch(0.48 0.1 75);
  --hf-warning-light: oklch(0.95 0.04 85);
  --hf-danger: oklch(0.44 0.15 25);
  --hf-danger-light: oklch(0.94 0.03 25);
  --hf-sidebar: #1c1b17;
  --hf-sidebar-active: #e34a1e;
  --hf-border: #ddd7ca;
  --hf-text: #16150f;
  --hf-text-muted: #67635a;
  --hf-background: #faf8f3;
  --hf-card: #ffffff;
  --hf-radius: 0px;
  --hf-shadow: none;
  --hf-focus-ring: rgba(227, 74, 30, 0.4);
  --kw-signal: #e34a1e;
  --kw-signal-hover: #c73d15;
}
html[data-design="signal"][data-theme="dark"] {
  --hf-primary: #f26534;
  --hf-primary-dark: #ff7a4a;
  --hf-primary-light: #35190f;
  --hf-accent: #f26534;
  --hf-accent-light: rgba(242, 101, 52, 0.16);
  --hf-success: oklch(0.78 0.1 150);
  --hf-success-light: oklch(0.32 0.04 150);
  --hf-warning: oklch(0.8 0.1 80);
  --hf-warning-light: oklch(0.32 0.05 80);
  --hf-danger: oklch(0.74 0.12 25);
  --hf-danger-light: oklch(0.32 0.05 25);
  --hf-sidebar: #0f0e0a;
  --hf-sidebar-active: #f26534;
  --hf-border: #33302a;
  --hf-text: #f5f2e9;
  --hf-text-muted: #a19b8d;
  --hf-background: #16150f;
  --hf-card: #201e18;
  --hf-focus-ring: rgba(242, 101, 52, 0.5);
  --kw-signal: #f26534;
  --kw-signal-hover: #ff7a4a;
}

/* Harte Kanten, große Größensprünge, Orange als Fläche. */
html[data-design="signal"] .card,
html[data-design="signal"] .pill,
html[data-design="signal"] .btn,
html[data-design="signal"] .btn-scan { border-radius: 0; }
html[data-design="signal"] .page-head h1 { font-size: 34px; letter-spacing: -0.03em; }
html[data-design="signal"] .hook { font-size: 21px; }
html[data-design="signal"] .pill { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
/* Dunkle Seitenleiste mit orangefarbenem aktivem Eintrag — in beiden Modi. */
html[data-design="signal"] .sidebar { color: #f5f2e9; }
html[data-design="signal"] .sidebar .brand,
html[data-design="signal"] .sidebar .nav-group { color: #f5f2e9; }
html[data-design="signal"] .sidebar nav a { color: #cfc9bb; }
html[data-design="signal"] .sidebar nav a:hover { color: #ffffff; }
html[data-design="signal"] .sidebar nav a.active {
  background: var(--kw-signal);
  color: #ffffff;
  font-weight: 700;
}
html[data-design="signal"] .tabs { border-bottom-width: 3px; }
html[data-design="signal"] .tab.active { border-bottom-color: var(--kw-signal); font-weight: 700; }
html[data-design="signal"] .btn { background: var(--hf-text); color: var(--hf-card); border-color: var(--hf-text); }
/* Bis 09.09. saß der Umschalter im Fuß der DUNKLEN Seitenleiste und trug deshalb hier
   eine helle Sonderfarbe. Seit dem Umzug ins Konto-Menü steht er auf --hf-card, also im
   Hellmodus auf Weiß — dieselbe Sonderfarbe ergab dort 1,28:1 (gemessen im Browser,
   Probe scripts/probe_konto.py). Er nimmt jetzt die normalen Karten-Farben; die
   Begründung von damals ist mit der Leiste weggefallen, nicht die Regel allein. */
html[data-design="signal"] .theme-toggle {
  background: var(--hf-card);
  color: var(--hf-text);
  border-color: var(--hf-border);
}
html[data-design="signal"] .theme-toggle:hover { border-color: var(--hf-text); }