/* =========================================================
   dEVils-Nails – Design-Tokens
   Gemeinsam genutzt von Admin (app.css) und oeffentlicher Seite (site.css).

   Regeln:
   - Ohne data-theme-Attribut gilt IMMER das dunkle Schema (der Admin setzt
     nie ein Attribut und bleibt dunkel).
   - Das helle Schema gibt es nur unter html[data-theme="light"]; wer das
     Attribut setzt, entscheidet das Sonnenstand-Script der oeffentlichen
     Seite -- kein prefers-color-scheme.
   - Die "alten" Namen (--color-*, --font-*, --radius*, --max-width) bleiben
     erhalten, weil app.css darauf aufbaut. Alles darunter ist die
     Erweiterung fuer das oeffentliche Design.
   - Nur Systemschriften, keine externen Ressourcen (DSGVO).
   ========================================================= */

:root {
  color-scheme: dark;

  /* ---- Basis (vom Admin genutzt) ---- */
  --color-bg: #100d15;
  --color-surface: #191420;
  --color-surface-alt: #221b2b;
  --color-text: #f7f2f8;
  --color-text-muted: #b9aec6;
  --color-accent: #e2197a;         /* 4.5:1 mit weissem Text (AA). Vorher #e6197a mit 4.39:1 --
                                      1.6 % dunkler, mit blossem Auge nicht zu unterscheiden. */
  --color-accent-hover: #d4126e;   /* weisser Text bleibt >= 4.5:1 (AA) */
  --color-border: #362d42;
  --color-danger: #ff6b6b;
  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 12px;
  --radius-lg: 22px;
  --max-width: 1140px;

  /* ---- Erweiterung ---- */
  --bg-soft: #150f1d;
  --panel: rgba(255, 255, 255, .04);
  --panel-solid: #191420;
  --line: rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .22);
  --dim: #948aa0;

  --accent-soft: rgba(230, 25, 122, .14);
  --accent-line: rgba(230, 25, 122, .45);
  --accent-ink: #ff5aa5;          /* Pink als Textfarbe auf dunklem Grund */
  --on-accent: #ffffff;
  --ink-dark: #17121d;            /* bleibt in beiden Schemata dunkel (Logo-Pille, Footer) */
  --fokus-ring: #f7f2f8;          /* Tastatur-Fokus. Bewusst NICHT die Akzentfarbe:
                                     auf einem Akzent-Button waere ein Akzent-Rahmen
                                     unsichtbar (gemessen 1.00:1 zum Buttongrund). */
  --fokus-ring-auf-dunkel: #ffffff; /* fuer immer dunkle Flaechen, z. B. den TikTok-Feed */
  --accent-auf-dunkel: #ff5aa5;   /* Akzent auf immer-dunklen Flaechen (TikTok-Feed); im hellen
                                     Schema NICHT ueberschrieben, sonst 3.1:1 statt 6.9:1 */

  --glow-pink: rgba(230, 25, 122, .20);
  --glow-violet: rgba(124, 77, 255, .16);

  /* Jahreszeit: NUR der Farbton der dekorativen Verlaeufe. Die Akzentfarbe
     bleibt bewusst pink -- auf Herbst-Orange oder Winter-Blau erreicht
     weisser Text auf Knoepfen keinen ausreichenden Kontrast mehr. Der
     Standard entspricht dem Violett von frueher, damit sich ohne Jahreszeit
     nichts aendert. */
  --season-rgb: 124, 77, 255;
  --season-glow-a: .26;   /* 09.09.2026 von .16 angehoben -- die Jahreszeit war kaum zu sehen */
  --glow-season: rgba(var(--season-rgb), var(--season-glow-a));

  --star: #f5b942;                /* Bewertungssterne: warmes Gold, sparsam eingesetzt */
  --star-off: rgba(255, 255, 255, .18);

  --shadow-md: 0 14px 36px -18px rgba(0, 0, 0, .7);
  --shadow-lg: 0 34px 90px -34px rgba(0, 0, 0, .85);
  --shadow-accent: 0 14px 34px -14px rgba(230, 25, 122, .6);

  --header-bg: rgba(16, 13, 21, .84);
  --field-bg: rgba(16, 13, 21, .6);

  --sans: var(--font-body);
  --serif: var(--font-heading);
  /* ui-monospace kennt nur WebKit/Blink; danach echte Namen fuer Windows,
     Android und Linux, sonst faellt Firefox auf generic monospace zurueck. */
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo,
          Consolas, "Roboto Mono", "Droid Sans Mono", "DejaVu Sans Mono",
          "Liberation Mono", monospace;

  --shell: var(--max-width);
  --gutter: clamp(1.15rem, 5vw, 4rem);
  --radius-sm: 10px;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

html[data-theme="light"] {
  color-scheme: light;

  /* Bewusst kein Weiss: das helle Schema bleibt gedeckt, rosé-grau statt Papier */
  --color-bg: #ebe2e9;
  --color-surface: #f6f0f4;
  --color-surface-alt: #ede4eb;
  --color-text: #1b1420;
  --color-text-muted: #5c5166;
  --color-accent: #cf1370;
  --color-accent-hover: #b8105f;
  --color-border: #e3dbe1;
  --color-danger: #c62839;         /* auf Weiss lesbar (5.6:1), statt Lachs */

  --bg-soft: #e2d7e0;
  --panel: rgba(255, 255, 255, .5);
  --panel-solid: #f6f0f4;
  --line: rgba(27, 20, 32, .14);
  --line-soft: rgba(27, 20, 32, .08);
  --line-strong: rgba(27, 20, 32, .26);
  --dim: #64596d;                  /* 5.9:1 auf --color-bg, 4.5:1 auf dem aktiven Filter-Chip */

  --accent-soft: rgba(207, 19, 112, .09);
  --accent-line: rgba(207, 19, 112, .38);
  --accent-ink: #b8105f;
  --fokus-ring: #1b1420;

  --glow-pink: rgba(230, 25, 122, .16);
  --glow-violet: rgba(124, 77, 255, .12);
  --season-glow-a: .20;   /* siehe oben; hell braucht etwas weniger als dunkel */

  --star: #d9931a;
  --star-off: rgba(27, 20, 32, .16);

  --shadow-md: 0 14px 34px -20px rgba(40, 20, 40, .32);
  --shadow-lg: 0 30px 70px -34px rgba(40, 20, 40, .38);
  --shadow-accent: 0 14px 34px -14px rgba(207, 19, 112, .5);

  --header-bg: rgba(235, 226, 233, .84);
  --field-bg: rgba(255, 255, 255, .6);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
}

a {
  color: inherit;
}

/* ---- Buttons (Admin und oeffentlich) ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .55rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--on-accent);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-accent);
  transition: transform .22s var(--ease), background-color .22s, border-color .22s, color .22s, box-shadow .22s;
}

.btn:hover {
  background: var(--color-accent-hover);
  color: var(--on-accent);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn .arrow {
  display: inline-flex;
  transition: transform .22s var(--ease);
}

.btn:hover .arrow {
  transform: translateX(3px);
}

.btn-outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--color-text);
  box-shadow: none;
}

.btn-outline:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--color-text);
}

.btn-block {
  display: flex;
  width: 100%;
}


/* ---------- Jahreszeiten ----------
   Gesetzt wird ausschliesslich der FARBTON der vier dekorativen Verlaufsflecken
   (Seitenhintergrund, Vollbildmenue, Hero-Kachel, Fusszeile). Die Deckkraft
   kommt weiterhin vom Tag/Nacht-Schema, Schrift und Knoepfe bleiben immer
   Marken-Pink.

   Diese Werte sind BEWUSST NICHT die Farben aus den Logo-SVGs. Die Logos
   tragen die Jahreszeit kraeftig (Herbst orange, Winter cyan) -- das ist Evis
   Grafik und bleibt so. Dieselben Toene grossflaechig auf der Seite haben die
   Marke aber verlassen: die Seite sah im Herbst orange und im Winter blau aus
   statt nach dEVils-Nails. Deshalb bleibt der Seitenton in der Markenfamilie
   und variiert nur warm/kalt und hell/tief:
     Fruehling  helles Rose
     Sommer     warmes, kraeftiges Pink
     Herbst     tiefes Beerenrot
     Winter     kuehles Blauviolett (nah am Basiston)
   Ohne data-season (oder bei "basis") bleibt alles exakt wie bisher. */
html[data-season="fruehling"] { --season-rgb: 226, 106, 172; }
html[data-season="sommer"]    { --season-rgb: 255, 96, 140; }
html[data-season="herbst"]    { --season-rgb: 198, 78, 96; }
html[data-season="winter"]    { --season-rgb: 122, 122, 226; }