/**
 * SCHICHT 4 — THEME
 *
 * Was Komponenten lesen: --theme-{element}-{eigenschaft}[-{zustand}].
 * Zeigt bevorzugt auf Farbrollen aus semantic.css, sonst auf brand.
 * Zustände am Ende, in fester Reihenfolge: -hover, -active, -focus, -disabled.
 *
 * ═══ DIE REGEL, DIE MAN SICH NICHT MERKEN KANN, DARUM STEHT SIE HIER ═══
 * Custom Properties werden dort aufgelöst, wo sie DEKLARIERT sind. Ein
 * --theme-x: var(--text-primary) auf :root friert den :root-Wert ein.
 * Schaltet ein Kontext (.is-inverted, Dark Mode) --text-primary um, bleibt
 * --theme-x stehen. Kein Fehler in der Konsole, nur unlesbarer Text.
 *
 * Deshalb: JEDES --theme-*, das auf --text-*, --border-*, --background-*,
 * --surface-* oder --focus-ring-* zeigt, steht auch im Kontextblock unten.
 * Der Skill design-system-audit prüft das.
 */
@layer tokens.theme {
  :root {
    /* ── Seite ───────────────────────────────────────────────────────── */
    --theme-page-bg: var(--background-primary);
    --theme-page-text: var(--text-primary);

    /* ── Button ──────────────────────────────────────────────────────── */
    --theme-btn-radius: var(--brand-radius);
    --theme-btn-border-width: var(--border-width-thin);
    --theme-btn-padding-block: var(--space-2);
    --theme-btn-padding-inline: var(--space-4);
    --theme-btn-min-height: 2.25rem;

    --theme-btn-primary-bg: var(--action-primary-bg);
    --theme-btn-primary-bg-hover: color-mix(in srgb, var(--action-primary-bg) 86%, var(--background-primary));
    --theme-btn-primary-text: var(--action-primary-text);

    /* sekundär: Kontur, folgt dem Kontext */
    --theme-btn-secondary-bg: transparent;
    --theme-btn-secondary-bg-hover: var(--surface-hover);
    --theme-btn-secondary-text: var(--text-primary);
    --theme-btn-secondary-border: var(--border-default);
    --theme-btn-secondary-border-hover: var(--border-strong);

    /* Gefahr: dezent rot */
    --theme-btn-danger-bg: var(--background-danger);
    --theme-btn-danger-text: var(--text-danger);
    --theme-btn-danger-border: var(--border-danger);

    /* ── Link ────────────────────────────────────────────────────────── */
    --theme-link-color: var(--text-primary);
    --theme-link-color-hover: var(--text-primary);
    --theme-link-underline: var(--border-strong);

    /* ── Text-Varianten ──────────────────────────────────────────────── */
    --theme-heading-color: var(--text-primary);
    --theme-meta-color: var(--text-secondary);   /* kleine Schrift: nie --text-muted */

    /* ── Formular ────────────────────────────────────────────────────── */
    --theme-field-bg: var(--background-inset);
    --theme-field-text: var(--text-primary);
    --theme-field-border: var(--border-default);
    --theme-field-border-hover: var(--border-strong);
    --theme-field-border-focus: var(--border-accent);
    --theme-field-placeholder: var(--text-secondary);

    /* ── Karte ───────────────────────────────────────────────────────── */
    --theme-card-bg: var(--background-secondary);
    --theme-card-border: var(--border-default);
    --theme-card-radius: var(--radius-xl);
    --theme-card-padding: var(--space-5);
    --theme-card-accent: var(--border-accent);

    /* ── Navigation ──────────────────────────────────────────────────── */
    --theme-nav-bg: var(--background-primary);
    --theme-nav-text: var(--text-primary);
    --theme-nav-text-muted: var(--text-secondary);
    --theme-nav-border: var(--border-default);
    --theme-nav-hover: var(--surface-hover);
    --theme-nav-active: var(--surface-selected);

    /* ── Schwebende Fläche (Menüs) ───────────────────────────────────── */
    --theme-floating-bg: var(--background-floating);
    --theme-floating-border: var(--border-default);

    /* ── Fokus ───────────────────────────────────────────────────────── */
    --theme-focus-color: var(--focus-ring-color);

    /* ── Fehler und Hinweise ─────────────────────────────────────────── */
    --theme-error-text: var(--text-danger);
    --theme-error-border: var(--text-danger);
    --theme-warning-text: var(--text-warning);

    /* ── Label und Badge ─────────────────────────────────────────────── */
    --theme-badge-bg: var(--surface-highlight);
    --theme-badge-text: var(--text-secondary);
    --theme-badge-accent-bg: var(--surface-accent);
    --theme-badge-accent-text: var(--text-accent);
    --theme-badge-open-bg: var(--status-open-bg);
    --theme-badge-open-text: var(--status-open-text);
    --theme-badge-in-progress-bg: var(--status-in-progress-bg);
    --theme-badge-in-progress-text: var(--status-in-progress-text);
    --theme-badge-done-bg: var(--status-done-bg);
    --theme-badge-done-text: var(--status-done-text);
    --theme-badge-overdue-bg: var(--status-overdue-bg);
    --theme-badge-overdue-text: var(--status-overdue-text);
    --theme-badge-on-track-bg: var(--status-on-track-bg);
    --theme-badge-on-track-text: var(--status-on-track-text);
    --theme-badge-at-risk-bg: var(--status-at-risk-bg);
    --theme-badge-at-risk-text: var(--status-at-risk-text);
    --theme-badge-off-track-bg: var(--status-off-track-bg);
    --theme-badge-off-track-text: var(--status-off-track-text);

    --theme-avatar-1-bg: var(--avatar-1-bg);
    --theme-avatar-2-bg: var(--avatar-2-bg);
    --theme-avatar-3-bg: var(--avatar-3-bg);
    --theme-avatar-4-bg: var(--avatar-4-bg);
    --theme-avatar-5-bg: var(--avatar-5-bg);
    --theme-avatar-6-bg: var(--avatar-6-bg);
    --theme-avatar-text: var(--avatar-text);

    /* ── Tabelle und Liste ───────────────────────────────────────────── */
    --theme-avatar-1-bg: var(--avatar-1-bg);
    --theme-avatar-2-bg: var(--avatar-2-bg);
    --theme-avatar-3-bg: var(--avatar-3-bg);
    --theme-avatar-4-bg: var(--avatar-4-bg);
    --theme-avatar-5-bg: var(--avatar-5-bg);
    --theme-avatar-6-bg: var(--avatar-6-bg);
    --theme-avatar-text: var(--avatar-text);
    --theme-table-border: var(--border-subtle);
    --theme-table-head-text: var(--text-secondary);
    --theme-row-hover: var(--surface-hover);

    /* ── Leerer Zustand ──────────────────────────────────────────────── */
    --theme-empty-border: var(--border-default);
  }

  /* ── Kontextblock: dieselbe Liste für alle Kontexte ────────────────────
     Hier steht jedes Alias von oben, das auf eine Farbrolle zeigt, noch
     einmal, mit identischem Wert (maschinell aus der Liste oben erzeugt).
     Auf diesen Elementen wird var() mit den umgeschalteten Rollen neu aufgelöst. */
  .is-inverted,
  [data-theme="dark"] {
    --theme-page-bg: var(--background-primary);
    --theme-page-text: var(--text-primary);
    --theme-btn-border-width: var(--border-width-thin);
    --theme-btn-primary-bg: var(--action-primary-bg);
    --theme-btn-primary-bg-hover: color-mix(in srgb, var(--action-primary-bg) 86%, var(--background-primary));
    --theme-btn-primary-text: var(--action-primary-text);
    --theme-btn-secondary-bg-hover: var(--surface-hover);
    --theme-btn-secondary-text: var(--text-primary);
    --theme-btn-secondary-border: var(--border-default);
    --theme-btn-secondary-border-hover: var(--border-strong);
    --theme-btn-danger-bg: var(--background-danger);
    --theme-btn-danger-text: var(--text-danger);
    --theme-btn-danger-border: var(--border-danger);
    --theme-link-color: var(--text-primary);
    --theme-link-color-hover: var(--text-primary);
    --theme-link-underline: var(--border-strong);
    --theme-heading-color: var(--text-primary);
    --theme-meta-color: var(--text-secondary);   /* kleine Schrift: nie --text-muted */
    --theme-field-bg: var(--background-inset);
    --theme-field-text: var(--text-primary);
    --theme-field-border: var(--border-default);
    --theme-field-border-hover: var(--border-strong);
    --theme-field-border-focus: var(--border-accent);
    --theme-field-placeholder: var(--text-secondary);
    --theme-card-bg: var(--background-secondary);
    --theme-card-border: var(--border-default);
    --theme-card-accent: var(--border-accent);
    --theme-nav-bg: var(--background-primary);
    --theme-nav-text: var(--text-primary);
    --theme-nav-text-muted: var(--text-secondary);
    --theme-nav-border: var(--border-default);
    --theme-nav-hover: var(--surface-hover);
    --theme-nav-active: var(--surface-selected);
    --theme-floating-bg: var(--background-floating);
    --theme-floating-border: var(--border-default);
    --theme-focus-color: var(--focus-ring-color);
    --theme-error-text: var(--text-danger);
    --theme-error-border: var(--text-danger);
    --theme-warning-text: var(--text-warning);
    --theme-badge-bg: var(--surface-highlight);
    --theme-badge-text: var(--text-secondary);
    --theme-badge-accent-bg: var(--surface-accent);
    --theme-badge-accent-text: var(--text-accent);
    --theme-badge-open-bg: var(--status-open-bg);
    --theme-badge-open-text: var(--status-open-text);
    --theme-badge-in-progress-bg: var(--status-in-progress-bg);
    --theme-badge-in-progress-text: var(--status-in-progress-text);
    --theme-badge-done-bg: var(--status-done-bg);
    --theme-badge-done-text: var(--status-done-text);
    --theme-badge-overdue-bg: var(--status-overdue-bg);
    --theme-badge-overdue-text: var(--status-overdue-text);
    --theme-badge-on-track-bg: var(--status-on-track-bg);
    --theme-badge-on-track-text: var(--status-on-track-text);
    --theme-badge-at-risk-bg: var(--status-at-risk-bg);
    --theme-badge-at-risk-text: var(--status-at-risk-text);
    --theme-badge-off-track-bg: var(--status-off-track-bg);
    --theme-badge-off-track-text: var(--status-off-track-text);
    --theme-table-border: var(--border-subtle);
    --theme-table-head-text: var(--text-secondary);
    --theme-row-hover: var(--surface-hover);
    --theme-empty-border: var(--border-default);
  }
}