@import "../brand/css/asuite-theme.css";

:root {
  color-scheme: dark;

  /* RGB channels: single source of truth (readable labels) */
  --rgb-black: var(--asuite-rgb-black); /* Schwarz, harte Kontraste */
  --rgb-white: var(--asuite-rgb-white); /* Weiss, Text auf dunklem Grund */
  --rgb-body-bg: var(--asuite-rgb-body-bg); /* Seitenhintergrund (blaugrau) */
  --rgb-text: var(--asuite-rgb-text); /* Standard-Text (hell) */
  --rgb-muted: var(--asuite-rgb-muted); /* Sekundaerer Text */
  --rgb-surface-base: var(--asuite-rgb-surface-base); /* Hauptflaeche (dunkles Blau) */
  --rgb-accent: var(--asuite-rgb-accent); /* Primar-Akzent (hellblau) */
  --rgb-accent-hover: var(--asuite-rgb-accent-hover); /* Akzent Hover (hellgruen) */
  --rgb-info: var(--asuite-rgb-info); /* Info-Hinweise */
  --rgb-accent-strong: var(--asuite-rgb-accent-strong); /* Kräftiger Akzent */
  --rgb-success: var(--asuite-rgb-success); /* Erfolg */
  --rgb-danger: var(--asuite-rgb-danger); /* Fehler */
  --rgb-warning: var(--asuite-rgb-warning); /* Warnung */
  --rgb-info-soft: var(--asuite-rgb-info-soft); /* Info-Hintergrund (soft) */
  --rgb-panel-border: var(--asuite-rgb-panel-border); /* Panel-Rahmen */
  --rgb-field-border: var(--asuite-rgb-field-border); /* Input-Rahmen */
  --rgb-field-focus: var(--asuite-rgb-field-focus); /* Input-Fokusflaeche */

  /* Surface and field color tokens */
  --recipe-panel-gradient: transparent;
  --surface-panel: var(--asuite-surface-card);
  --surface-panel-soft: rgb(var(--rgb-surface-base) / var(--alpha-60));

  --field-bg: var(--asuite-field-bg);
  --field-bg-focus: var(--asuite-field-bg-focus);
  --field-border: var(--asuite-field-border);
  --field-border-focus: var(--asuite-field-border-focus);
  --field-placeholder: var(--asuite-field-placeholder);

  --recipe-progress-easy: rgb(var(--rgb-accent));
  --recipe-progress-hard: rgb(var(--rgb-danger));
  --recipe-progress-fill: var(--recipe-progress-easy);

  --foldout-bg: rgb(var(--rgb-surface-base));
  --foldout-bg-open: rgb(var(--rgb-surface-base));
}