/* ==========================================================================
   theme.css — Design-Tokens (Farben, Typografie, Abstaende, Radien, Zeiten)
   Dark ist Standard (bare :root). Light ueberschreibt via
   [data-theme="light"] (expliziter Toggle) und per prefers-color-scheme
   (OS-Praeferenz), wobei der explizite Toggle in beide Richtungen gewinnt.

   Palette: dunkel-elegant, gedaempftes Bordeaux als Akzent. Alle Text/Flaechen-
   Paarungen sind gegen WCAG-AA (4.5:1) geprueft (siehe PR-Notiz). Die sechs
   Antwortstufen-Tokens (--ans-*) bilden eine Reihe von "kraeftig" (Favorit)
   ueber "gedaempft/kuehl" (NoGo) bis "fast unsichtbar" (Offen) - jede Stufe
   hat ein eigenes Kontrast-Token --ans-*-ink fuer Text auf der Flaeche.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* -- Typografie ------------------------------------------------------- */
  /* System-Font-Stack - keine Webfonts, keine externen Requests. */
  --font-sans: -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* -- Abstaende / Radien / Groessen ------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --border-width: 1px;

  --shell-max-width: 900px;

  /* -- Zeiten ------------------------------------------------------------ */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 420ms ease;

  /* -- Grund-/Oberflaechenfarben (Dark, Default) ------------------------- */
  --bg: #180f13;
  --bg-elevated: #1f1417;
  --surface: #241820;
  --surface-alt: #2b1c25;
  --surface-hover: #33212c;
  --border: #3d2831;
  --border-strong: #52323f;

  /* -- Text --------------------------------------------------------------- */
  --text: #ede6e8;
  --text-dim: #c7b9c0;
  --muted: #9a8690;

  /* -- Akzent (gedaempftes Bordeaux) --------------------------------------- */
  --accent: #c93c5c;
  /* Heller Text-Variante fuer Akzentfarbe AUF --bg (Links, Wortmarke) -
     das reine --accent besteht als Flaechenfarbe mit weisser Schrift, aber
     nicht als Fliesstext direkt auf --bg (zu wenig Kontrast). */
  --accent-strong: #d05d7a;
  /* Dunklere Variante fuer Hover/Active auf Buttons - bewusst dunkler statt
     heller, weil Bordeaux mit weisser Schrift beim Aufhellen an Kontrast
     verliert. Wirkt zugleich wie "tiefer gedrueckt". */
  --accent-dim: #7a2740;
  --accent-contrast: #ffffff;

  /* -- Semantische Farben --------------------------------------------------- */
  --ok: #4f9d6e;
  --ok-bg: rgba(79, 157, 110, 0.14);
  --warn: #d1a13a;
  --warn-bg: rgba(209, 161, 58, 0.14);
  --danger: #d1596f;
  --danger-bg: rgba(209, 89, 111, 0.14);

  --focus-ring: #6fc3ff;

  --btn-primary-bg: var(--accent);
  --btn-primary-text: var(--accent-contrast);
  --btn-primary-bg-hover: var(--accent-dim);
  --btn-secondary-bg: var(--surface-alt);
  --btn-secondary-text: var(--text);
  --btn-secondary-bg-hover: var(--surface-hover);
  --btn-ghost-text: var(--text-dim);
  --btn-ghost-bg-hover: var(--surface);

  --shadow-card: none;

  /* -- Antwortstufen (Favorit -> NoGo -> Offen) ---------------------------
     Reihenfolge = Intensitaet: warmes, kraeftiges Rosa/Rot (Favorit) ueber
     Amber/Gold, gedaempftes Warmgrau (Vielleicht) zu kuehlem Graublau (NoGo)
     und schliesslich einer fast unsichtbaren neutralen Flaeche (Offen). Die
     Symbole/Icons je Stufe liefert spaeter die UI - die Farbe allein traegt
     die Unterscheidung nicht. */
  --ans-favorit: #c93c5c;
  --ans-favorit-ink: #ffffff;
  --ans-like: #c97a4a;
  --ans-like-ink: #241206;
  --ans-interessiert: #c9a83f;
  --ans-interessiert-ink: #23190a;
  --ans-vielleicht: #8a7a6e;
  --ans-vielleicht-ink: #120d0a;
  --ans-nogo: #5b6b7a;
  --ans-nogo-ink: #eef2f5;
  --ans-offen: #332a30;
  --ans-offen-ink: #c9bcc3;
}

/* -- Light-Theme: expliziter Toggle (data-theme="light") ------------------ */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #faf6f3;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f3ebe7;
  --surface-hover: #ece0da;
  --border: #e0d0c8;
  --border-strong: #cdb7ac;

  --text: #2a1a1f;
  --text-dim: #5c4249;
  --muted: #77626a;

  --accent: #7a1f3a;
  --accent-strong: #5e1730;
  --accent-dim: #a8506e;
  --accent-contrast: #ffffff;

  --ok: #1f7a4c;
  --ok-bg: rgba(31, 122, 76, 0.12);
  --warn: #8a660a;
  --warn-bg: rgba(138, 102, 10, 0.12);
  --danger: #a52f47;
  --danger-bg: rgba(165, 47, 71, 0.12);

  --focus-ring: #0b63b3;

  --btn-primary-bg: var(--accent);
  --btn-primary-text: var(--accent-contrast);
  --btn-primary-bg-hover: var(--accent-strong);
  --btn-secondary-bg: var(--surface-alt);
  --btn-secondary-text: var(--text);
  --btn-secondary-bg-hover: var(--surface-hover);
  --btn-ghost-text: var(--text-dim);
  --btn-ghost-bg-hover: var(--surface-alt);

  --shadow-card: 0 1px 2px rgba(20, 12, 15, 0.06);

  --ans-favorit: #b6355a;
  --ans-favorit-ink: #fff9fa;
  --ans-like: #a85f2e;
  --ans-like-ink: #fffaf5;
  --ans-interessiert: #8a6e18;
  --ans-interessiert-ink: #fffdf5;
  --ans-vielleicht: #7a6a5c;
  --ans-vielleicht-ink: #faf7f5;
  --ans-nogo: #48586a;
  --ans-nogo-ink: #eef2f6;
  --ans-offen: #ece3de;
  --ans-offen-ink: #6b564d;
}

/* -- Light-Theme: OS-Praeferenz, nur wenn kein expliziter dark-Toggle ----- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg: #faf6f3;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f3ebe7;
    --surface-hover: #ece0da;
    --border: #e0d0c8;
    --border-strong: #cdb7ac;

    --text: #2a1a1f;
    --text-dim: #5c4249;
    --muted: #77626a;

    --accent: #7a1f3a;
    --accent-strong: #5e1730;
    --accent-dim: #a8506e;
    --accent-contrast: #ffffff;

    --ok: #1f7a4c;
    --ok-bg: rgba(31, 122, 76, 0.12);
    --warn: #8a660a;
    --warn-bg: rgba(138, 102, 10, 0.12);
    --danger: #a52f47;
    --danger-bg: rgba(165, 47, 71, 0.12);

    --focus-ring: #0b63b3;

    --btn-primary-bg: var(--accent);
    --btn-primary-text: var(--accent-contrast);
    --btn-primary-bg-hover: var(--accent-strong);
    --btn-secondary-bg: var(--surface-alt);
    --btn-secondary-text: var(--text);
    --btn-secondary-bg-hover: var(--surface-hover);
    --btn-ghost-text: var(--text-dim);
    --btn-ghost-bg-hover: var(--surface-alt);

    --shadow-card: 0 1px 2px rgba(20, 12, 15, 0.06);

    --ans-favorit: #b6355a;
    --ans-favorit-ink: #fff9fa;
    --ans-like: #a85f2e;
    --ans-like-ink: #fffaf5;
    --ans-interessiert: #8a6e18;
    --ans-interessiert-ink: #fffdf5;
    --ans-vielleicht: #7a6a5c;
    --ans-vielleicht-ink: #faf7f5;
    --ans-nogo: #48586a;
    --ans-nogo-ink: #eef2f6;
    --ans-offen: #ece3de;
    --ans-offen-ink: #6b564d;
  }
}