/* ==========================================================================
   KantTresor — Design Tokens (Single Source of Truth)
   Baustein 02 (tasks/02-ui-baseline.md). Orientiert an example.html:
   helles Theme, Salbeigrün-Primary, warmer Gold-Akzent, weiche Neutraltöne.
   Alle UI-Bausteine erben diese Variablen — nirgends Hex-Werte hart codieren.
   ========================================================================== */

:root {
  /* --- Brand: Salbeigrün --------------------------------------------------- */
  --c-primary: #56836f;
  --c-primary-strong: #41685a;
  --c-primary-deep: #2e4a3f;
  --c-primary-tint: #e9f1ec;
  --c-primary-tint-2: #cfe0d6;
  --c-on-primary: #ffffff;

  /* --- Akzent: Gold (Belege/Hervorhebung) --------------------------------- */
  --c-accent: #c2a25f;
  --c-accent-strong: #917037;
  --c-accent-tint: #f5edd9;

  /* --- Neutrale Flächen & Text -------------------------------------------- */
  --c-bg: #f6f7f9;
  --c-surface: #ffffff;
  --c-surface-2: #fafbfc;
  --c-surface-3: #eef0f4;
  --c-border: #e6e9ef;
  --c-border-strong: #d2d6de;
  --c-text: #1b1d26;
  --c-text-muted: #565b67;
  --c-text-subtle: #969cab;
  --c-text-faint: #aab0bd;

  /* --- Status / semantisch ------------------------------------------------- */
  --c-success: #467a64;
  --c-success-tint: #e9f4ee;
  --c-info: #3f7191;
  --c-info-tint: #e7eff4;
  --c-warning: #917037;
  --c-warning-strong: #7a5d2c;
  --c-warning-tint: #f5edd9;
  --c-danger: #a05050;
  --c-danger-strong: #8f5238;
  --c-danger-tint: #f6ece5;

  /* --- Typografie ---------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.875rem; /* 14 */
  --fs-md: 0.9375rem;  /* 15 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* --- Spacing (4px-Raster) ------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* --- Radius -------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* --- Schatten (weich, gedämpft) ----------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);

  /* --- Layout -------------------------------------------------------------- */
  --sidebar-w: 248px;
  --sidebar-collapsed-w: 68px;
  --topbar-h: 60px;
  --content-max: 1200px;

  /* --- Marke (Logo: einfarbig, kein Verlauf) ------------------------------- */
  --c-logo-bg: var(--c-primary);
  --c-logo-fg: var(--c-on-primary);

  /* --- Ring / Fokus (weicher, transluzenter Premium-Glow) ------------------ */
  --ring: 0 0 0 4px color-mix(in srgb, var(--c-primary) 20%, transparent);
  --ring-strong: 0 0 0 4px color-mix(in srgb, var(--c-primary) 32%, transparent);

  /* --- Control-Geometrie (Buttons/Inputs: etwas runder = premium) ---------- */
  --radius-control: 9px;
  --control-h: 40px;
  --shadow-btn: 0 1px 2px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-btn-hover: 0 4px 14px rgba(16, 24, 40, 0.12), 0 2px 4px rgba(16, 24, 40, 0.08);

  /* --- Karten-/Eingabe-Tiefe (weich, mehrschichtig — gegen den „flachen" Look) */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 18px -8px rgba(16, 24, 40, 0.12);
  --shadow-card-hover: 0 1px 2px rgba(16, 24, 40, 0.06), 0 14px 30px -12px rgba(16, 24, 40, 0.2);
  --shadow-input-inset: inset 0 1px 1px rgba(16, 24, 40, 0.05);

  /* --- Sekundär-Button: neutral mit feinem Markenanflug (kein Verlauf) ------ */
  --c-btn-secondary-bg: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface));
  --c-btn-secondary-border: color-mix(in srgb, var(--c-primary) 26%, var(--c-border-strong));

  /* --- Select-Chevron: markenfarbig & deutlich sichtbar (themenabhängig) ---- */
  --select-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2341685a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

  /* --- Motion / z-index ---------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition: 180ms ease;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast: 1100;

  /* --- Skeleton ------------------------------------------------------------ */
  --skeleton-base: #e9ecf1;
  --skeleton-shine: #f3f5f8;
}

/* Dunkles Theme (per <html data-theme="dark">). Vollständige Palette, damit
   Badges, Tags, Tints und Schatten im Dark-Mode genauso stimmig sind wie hell. */
:root[data-theme="dark"] {
  /* Flächen & Text */
  --c-bg: #0f1115;
  --c-surface: #181b21;
  --c-surface-2: #1e222a;
  --c-surface-3: #262b34;
  --c-border: #2a2f3a;
  --c-border-strong: #3a414f;
  --c-text: #e8ebf1;
  --c-text-muted: #aab0bd;
  --c-text-subtle: #868d9c;
  --c-text-faint: #636b78;

  /* Brand: etwas heller, damit Grün auf dunklem Grund lebendig bleibt */
  --c-primary: #6fa088;
  --c-primary-strong: #82b29a;
  --c-primary-deep: #a9d0bd;
  --c-primary-tint: #1c2a24;
  --c-primary-tint-2: #284036;

  /* Akzent / Status — dunkle Tints + hellere Textfarben für Kontrast */
  --c-accent: #cdb069;
  --c-accent-strong: #d8bd7a;
  --c-accent-tint: #2c2719;
  --c-success: #74b394;
  --c-success-tint: #182a22;
  --c-info: #6aa5c6;
  --c-info-tint: #16252e;
  --c-warning: #cda85e;
  --c-warning-strong: #d8b876;
  --c-warning-tint: #2a2417;
  --c-danger: #cf8c7e;
  --c-danger-strong: #d99784;
  --c-danger-tint: #2c1d18;

  /* Logo bleibt einfarbig, nur abgestimmt */
  --c-logo-bg: #3f6353;
  --c-logo-fg: #eaf3ee;

  /* Schatten im Dark-Mode tiefer/weicher */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.6);

  --ring: 0 0 0 4px color-mix(in srgb, var(--c-primary) 28%, transparent);
  --ring-strong: 0 0 0 4px color-mix(in srgb, var(--c-primary) 42%, transparent);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-btn-hover: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px -10px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 34px -12px rgba(0, 0, 0, 0.7);
  --shadow-input-inset: inset 0 1px 1px rgba(0, 0, 0, 0.28);

  /* Sekundär-Button: dunkle, leicht angehobene Fläche mit Markenanflug */
  --c-btn-secondary-bg: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface-2));
  --c-btn-secondary-border: color-mix(in srgb, var(--c-primary) 34%, var(--c-border-strong));

  /* Chevron im Dark-Mode heller, damit er auf dunklem Grund sichtbar bleibt */
  --select-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2382b29a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

  --skeleton-base: #20242c;
  --skeleton-shine: #2c313b;
}

/* Sanfter Theme-Übergang beim Umschalten (nur Flächen/Text, nicht Layout). */
:root.theme-anim,
:root.theme-anim * {
  transition: background-color 220ms ease, border-color 220ms ease,
    color 220ms ease, box-shadow 220ms ease !important;
}