/* ============================================================
   LifeFolder — Design Tokens (single source of truth)
   Rohe Markenpalette -> SEMANTISCHE ROLLEN. In Komponenten IMMER
   die Rollen-Variablen (--color-*, --space-*, …) benutzen, nie rohe Hex.
   Farbe/Buttons/Theme ändern = hier ändern.
   ============================================================ */
:root {
  /* ---- Rohe Markenpalette ---- */
  --brand-green: #017854;
  --brand-green-deep: #036548;
  --brand-green-soft: #E6F1EC;
  --brand-green-night: #0B5C44; /* dunkelster Verlaufs-Stopp (Marketing/Landing) */

  /* Landing „Under construction"-Band (Marketing; Basis = Review-Amber) */
  --landing-ribbon-border: #F1E2C2;
  --landing-stripe: #E7B24A;
  --brand-ink: #1C2D34;
  --brand-mint: #B6DACB;

  /* AI = Blau (Suchleiste / KI-Flächen) */
  --brand-ai: #2F8BFF;
  --brand-ai-deep: #1F6FE0;
  --brand-ai-border: #7FB8FF;
  --brand-ai-soft: #F2F8FF;
  --brand-ai-tile: #EAF3FF;

  /* Status (leise -> laut) */
  --status-valid-bg: #EEF2F6;  --status-valid-fg: #5C7186;
  --status-review-bg: #FBEFD9; --status-review-fg: #9A6512;
  --status-urgent-bg: #FBE6E3; --status-urgent-fg: #B23A28;

  /* Neutrale Flächen */
  --neutral-bg: #F8FAF7;
  --neutral-surface: #FFFFFF;
  --neutral-line: #EAEEF2;
  --neutral-line-soft: #F1F4F7;
  --neutral-ink: #1C2D34;
  --neutral-muted: #5C6E74;
  --neutral-muted-2: #8595A4;

  /* ---- SEMANTISCHE ROLLEN (in Komponenten verwenden) ---- */
  --color-bg: var(--neutral-bg);
  --color-surface: var(--neutral-surface);
  --color-ink: var(--neutral-ink);
  --color-muted: var(--neutral-muted);
  --color-muted-2: var(--neutral-muted-2);
  --color-line: var(--neutral-line);
  --color-line-soft: var(--neutral-line-soft);

  /* DIE eine primäre Aktion / aktive Nav / Logo */
  --color-action: var(--brand-green);
  --color-action-hover: var(--brand-green-deep);
  --color-action-soft: var(--brand-green-soft);
  --on-action: #FFFFFF;

  /* Green-Rule: „ausgewählt/aktiv/an" (NICHT die Primäraktion) → Ink-Navy;
     „Status/positiv" (On/Saved/New/Added/…) → Slate. Nie grün. */
  --color-selected: var(--color-ink);            /* Ink-Navy #1C2D34 (Text/Rand/Akzent) */
  --color-selected-soft: var(--status-valid-bg); /* dezente Slate-Fläche (theme-aware) */
  --color-status-bg: var(--status-valid-bg);
  --color-status-fg: var(--status-valid-fg);

  /* KI */
  --color-ai: var(--brand-ai);
  --color-ai-hover: var(--brand-ai-deep);
  --color-ai-border: var(--brand-ai-border);
  --color-ai-soft: var(--brand-ai-soft);
  --color-ai-tile: var(--brand-ai-tile);

  /* Ask-AI-Button + Panel (sanftes Hellblau — der EINE, bewusste KI-Einstieg;
     sekundär, nie dominanter als die grüne Primäraktion) */
  --ask-ai-bg: #EAF7FF;
  --ask-ai-bg-hover: #DFF2FF;
  --ask-ai-border: #B7E6FF;
  --ask-ai-ink: #0B6FAE;

  /* Sidebar */
  --side-bg: #FFFFFF;
  --side-ink: #51677A;
  --side-ink-hover: var(--brand-ink);
  --side-active-bg: var(--brand-green-soft);
  --side-active-ink: var(--brand-green-deep);

  /* Typografie */
  --font-ui: 'Inter', -apple-system, system-ui, sans-serif;
  --font-head: 'Poppins', 'Inter', sans-serif;

  /* Geometrie & Elevation */
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-pill: 8px;
  --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 32px;
  --shadow-1: 0 1px 2px rgba(28, 45, 52, .05);
  --shadow-2: 0 2px 10px rgba(28, 45, 52, .06);
  --shadow-3: 0 12px 30px rgba(28, 45, 52, .10);

  /* KI-Glow der Suchleiste */
  --ai-glow: 0 0 0 3px rgba(47, 139, 255, .18), 0 0 16px rgba(47, 139, 255, .42);

  /* Bewegung */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* ============ Dark Mode: NUR Token-Overrides ============ */
[data-theme="dark"] {
  --neutral-bg: #0E1621;
  --neutral-surface: #161F2B;
  --neutral-line: #28333F;
  --neutral-line-soft: #202B39;
  --neutral-ink: #E8EDF2;
  --neutral-muted: #8E9CAC;
  --neutral-muted-2: #7D8E9C;

  --brand-green-soft: #16321F;
  --brand-ai-soft: #13243A;
  --brand-ai-tile: #16263A;

  /* Ask-AI im Dunkelmodus */
  --ask-ai-bg: #14283A;
  --ask-ai-bg-hover: #193249;
  --ask-ai-border: #294A68;
  --ask-ai-ink: #6FC0F5;

  --status-valid-bg: #202B39; --status-valid-fg: #9FB0BE;
  --status-review-bg: #352A12; --status-review-fg: #E3B85A;
  --status-urgent-bg: #37201B; --status-urgent-fg: #EF8585;

  --side-bg: #121B26;
  --side-ink: #9FB0BE;
  --side-ink-hover: #E8EDF2;
  --side-active-bg: #16321F;
  --side-active-ink: #5FD3A6;

  --color-action-hover: #5FD3A6;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-3: 0 12px 30px rgba(0, 0, 0, .45);
}

/* Textgröße S/M/L (Settings → Appearance). Die App ist px-basiert,
   daher skaliert zoom die gesamte Oberfläche gleichmäßig. */
html[data-textsize="sm"] body { zoom: 0.92; }
html[data-textsize="lg"] body { zoom: 1.1; }