/**
 * SCHICHT 3 — SEMANTIC
 *
 * Zeiger mit Bedeutung. Der einzige Ort, an dem Tokens per Media Query
 * umgeschaltet werden. Dabei wechselt immer nur die REFERENZ, nie der Wert
 * eines Primitives.
 *
 * Breakpoints (desktop-first, in em: folgen der Browser-Schriftgröße):
 *   Desktop : Standard
 *   Tablet  : max-width 64em    (1024px)
 *   Mobile  : max-width 48.75em (780px)
 *   Breit   : min-width 100em   (1600px), optional
 * Custom Properties sind in Media Queries nicht erlaubt. Die Werte stehen
 * deshalb hier und werden in Komponenten 1:1 übernommen.
 *
 * ACHTUNG Override-Schichten: Liegt eine Schicht über dieser (Presets pro
 * Kunde/Variante), muss sie JEDE Media Query unten wiederholen, sonst gilt
 * ihr Desktop-Wert auf allen Geräten. Dann lieber clamp()-Typografie.
 *
 * Zeilenhöhen werden aus der Schriftgröße GERECHNET (calc), damit sie jedem
 * Breakpoint ohne eigene Media Query folgen.
 */
@layer tokens.semantic {
  :root {
    /* ── Farbrollen: Pflichtsatz. Fehlende Rollen weglassen, keine Synonyme
          erfinden (kein --text-body, kein --bg-*). Hell steht hier, Dunkel
          weiter unten (zweimal, siehe dort). ─────────────────────────── */
    --text-primary: var(--color-neutral-light-900);
    --text-secondary: var(--color-neutral-light-600);
    --text-muted: var(--color-neutral-light-400);       /* nur große oder dekorative Schrift */
    --text-brand: var(--brand-primary-500);
    --text-accent: var(--brand-primary-500);
    --text-danger: var(--color-red-700);
    --text-warning: var(--color-orange-700);

    /* Seite < Karte < schwebende Fläche (Menüs); Konturen statt Schatten */
    --background-primary: var(--color-neutral-light-100);
    --background-secondary: var(--color-neutral-light-50);       /* erhöht: Karten */
    --background-inset: var(--color-neutral-light-0);            /* eingelassen: Eingaben */
    --background-floating: var(--color-neutral-light-0);
    --background-danger: color-mix(in srgb, var(--color-red-700) 9%, transparent);

    /* Überlagerungen: funktionieren auf jeder Fläche */
    --surface-hover: color-mix(in srgb, var(--color-black) 3.5%, transparent);
    --surface-selected: color-mix(in srgb, var(--color-black) 6%, transparent);
    --surface-highlight: color-mix(in srgb, var(--color-black) 6%, transparent);   /* Labels */
    --surface-accent: color-mix(in srgb, var(--brand-primary-500) 14%, transparent);
    --surface-contrast-bg: var(--color-neutral-light-1000);
    --surface-contrast-text: var(--brand-on-contrast);

    /* Transparente Mischungen in srgb: oklab kann mit transparent den Farbton verschieben */
    --border-subtle: color-mix(in srgb, var(--color-neutral-light-900) 8%, transparent);
    --border-default: color-mix(in srgb, var(--color-neutral-light-900) 12%, transparent);
    --border-strong: color-mix(in srgb, var(--color-neutral-light-900) 28%, transparent);
    --border-accent: var(--brand-primary-500);
    --border-danger: color-mix(in srgb, var(--color-red-700) 45%, transparent);

    /* Primäraktion: invertierte Fläche (Hell: schwarz, Dunkel: weiß) */
    --action-primary-bg: var(--color-neutral-light-1000);
    --action-primary-text: var(--color-neutral-light-0);

    --focus-ring-color: var(--border-accent);
    --focus-ring-width: var(--border-width-medium);
    --focus-ring-offset: 0.125rem;

    /* ── Statusrollen: Fläche (transparent, passt auf Seite und Karte) + Text ─ */
    --status-open-bg: color-mix(in srgb, var(--color-black) 6%, transparent);
    --status-open-text: var(--color-neutral-light-600);
    --status-in-progress-bg: color-mix(in srgb, var(--color-blue-700) 11%, transparent);
    --status-in-progress-text: var(--color-blue-700);
    --status-done-bg: color-mix(in srgb, var(--color-green-700) 11%, transparent);
    --status-done-text: var(--color-green-700);
    --status-overdue-bg: color-mix(in srgb, var(--color-red-700) 10%, transparent);
    --status-overdue-text: var(--color-red-700);

    /* Berichtsstatus (AP-43): Im Plan, Gefährdet, Kritisch */
    --status-on-track-bg: color-mix(in srgb, var(--color-green-700) 11%, transparent);
    --status-on-track-text: var(--color-green-700);
    --status-at-risk-bg: color-mix(in srgb, var(--color-orange-700) 11%, transparent);
    --status-at-risk-text: var(--color-orange-700);
    --status-off-track-bg: color-mix(in srgb, var(--color-red-700) 11%, transparent);
    --status-off-track-text: var(--color-red-700);

    /* Fortschrittsbalken: Füllung nach Anteil erledigt, kein Rot (AP-39) */
    --progress-fill-0: var(--color-progress-light-0);
    --progress-fill-1: var(--color-progress-light-1);
    --progress-fill-2: var(--color-progress-light-2);
    --progress-fill-3: var(--color-progress-light-3);
    --progress-fill-4: var(--color-progress-light-4);

    /* ── Avatar-Palette: volle Fläche mit weißem Text, in Hell und Dunkel gleich (≥ 4,5 : 1) ─ */
    --avatar-text: var(--color-white);
    --avatar-1-bg: var(--color-blue-700);
    --avatar-2-bg: var(--color-green-700);
    --avatar-3-bg: var(--color-orange-700);
    --avatar-4-bg: var(--color-purple-700);
    --avatar-5-bg: var(--color-teal-700);
    --avatar-6-bg: var(--color-magenta-700);

    /* ── Typografie-Rollen ───────────────────────────────────────────── */
    --font-size-h1: var(--font-size-6xl);
    --font-size-h2: var(--font-size-xl);
    --font-size-h3: var(--font-size-lg);
    --font-size-h4: var(--font-size-sm);
    --font-size-body: var(--font-size-2sm);
    --font-size-small: var(--font-size-2xs);
    --font-size-caption: var(--font-size-3xs);
    --font-size-label: var(--font-size-xs);
    --font-size-button: var(--font-size-xs);
    --font-size-input: var(--font-size-xs);        /* Handy: 16 px, sonst zoomt iOS */
    --font-size-card-title: var(--font-size-2sm);

    --line-height-h1: calc(var(--font-size-h1) * 1.1);
    --line-height-h2: calc(var(--font-size-h2) * 1.25);
    --line-height-h3: calc(var(--font-size-h3) * 1.3);
    --line-height-h4: calc(var(--font-size-h4) * 1.4);
    --line-height-body: calc(var(--font-size-body) * 1.5);
    --line-height-small: calc(var(--font-size-small) * 1.45);
    --line-height-caption: calc(var(--font-size-caption) * 1.4);
    --line-height-ui: 1.25;

    /* ── Layout & Rhythmus ───────────────────────────────────────────── */
    --gutter: var(--space-12);            /* seitlicher Seitenrand */
    --container-max: 90rem;               /* 1440 */
    --container-text: 42rem;              /* 672: Lesebreite */
    --stack-lg: var(--space-8);
    --stack-md: var(--space-6);
    --stack-sm: var(--space-4);
    --grid-gap: var(--space-4);

    /* ── Bewegung ────────────────────────────────────────────────────── */
    --motion-duration-press: var(--duration-instant);
    --motion-duration-ui: var(--duration-fast);
    --motion-duration-menu: var(--duration-base);
    --motion-duration-message: var(--duration-slow);
    --motion-ease: var(--ease-out-strong);
    --motion-ease-move: var(--ease-in-out-strong);
  }

  /* Breit */
  @media (min-width: 100em) {
    :root {
      --gutter: var(--space-16);
    }
  }

  /* Tablet */
  @media (max-width: 64em) {
    :root {
      --font-size-h1: var(--font-size-5xl);
      --gutter: var(--space-8);
    }
  }

  /* Mobile */
  @media (max-width: 48.75em) {
    :root {
      --font-size-h1: var(--font-size-3xl);
      --font-size-h2: var(--font-size-lg);
      --font-size-h3: var(--font-size-md);
      --font-size-input: var(--font-size-sm);
      --gutter: var(--space-5);
      --stack-lg: var(--space-6);
    }
  }

  /* ── Kontexte: schalten NUR Farbrollen um ──────────────────────────────
     Die abhängigen Theme-Aliase schaltet theme.css auf denselben Selektoren
     mit. Neue Kontexte immer an BEIDEN Stellen ergänzen. */
  .is-inverted {
    background-color: var(--surface-contrast-bg);
    color: var(--surface-contrast-text);
    --text-primary: var(--surface-contrast-text);
    --text-secondary: color-mix(in srgb, var(--surface-contrast-text) 72%, transparent);
    --text-muted: color-mix(in srgb, var(--surface-contrast-text) 55%, transparent);
    --text-brand: var(--surface-contrast-text);
    --background-primary: var(--surface-contrast-bg);
    --background-secondary: color-mix(in oklab, var(--surface-contrast-text) 8%, var(--surface-contrast-bg));
    --background-inset: color-mix(in oklab, var(--surface-contrast-text) 14%, var(--surface-contrast-bg));
    --background-floating: color-mix(in oklab, var(--surface-contrast-text) 12%, var(--surface-contrast-bg));
    --surface-hover: color-mix(in srgb, var(--surface-contrast-text) 8%, transparent);
    --surface-selected: color-mix(in srgb, var(--surface-contrast-text) 12%, transparent);
    --surface-highlight: color-mix(in srgb, var(--surface-contrast-text) 12%, transparent);
    --border-subtle: color-mix(in srgb, var(--surface-contrast-text) 12%, transparent);
    --border-default: color-mix(in srgb, var(--surface-contrast-text) 20%, transparent);
    --border-strong: color-mix(in srgb, var(--surface-contrast-text) 42%, transparent);
    --action-primary-bg: var(--surface-contrast-text);
    --action-primary-text: var(--surface-contrast-bg);
    --focus-ring-color: var(--surface-contrast-text);
  }

  /* Dark Mode folgt der Systemeinstellung (prefers-color-scheme), kein Umschalter.
     Zwei Selektoren mit identischem Inhalt: das Medium-Query-Gegenstück zu
     [data-theme="dark"], das später einen Umschalter tragen kann.
     Werte nur hier ändern UND in beiden Blöcken. :root:not([data-theme="light"])
     lässt einen späteren Zwangs-Hellmodus zu. Dunkel ist die Referenz. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --text-primary: var(--color-neutral-dark-900);
      --text-secondary: var(--color-neutral-dark-600);
      --text-muted: var(--color-neutral-dark-500);
      --text-brand: var(--brand-accent-300);
      --text-accent: var(--brand-accent-300);
      --text-danger: var(--color-red-400);
      --text-warning: var(--color-orange-400);

      --background-primary: var(--color-neutral-dark-100);
      --background-secondary: var(--color-neutral-dark-150);
      --background-inset: var(--color-neutral-dark-50);
      --background-floating: var(--color-neutral-dark-200);
      --background-danger: color-mix(in srgb, var(--color-red-400) 14%, transparent);

      --surface-hover: color-mix(in srgb, var(--color-white) 6%, transparent);
      --surface-selected: color-mix(in srgb, var(--color-white) 8%, transparent);
      --surface-highlight: color-mix(in srgb, var(--color-white) 8%, transparent);
      --surface-accent: color-mix(in srgb, var(--brand-accent-500) 24%, transparent);
      --surface-contrast-bg: var(--color-neutral-dark-1000);
      --surface-contrast-text: var(--color-neutral-dark-50);

      --border-subtle: color-mix(in srgb, var(--color-neutral-dark-1000) 8%, transparent);
      --border-default: color-mix(in srgb, var(--color-neutral-dark-1000) 10%, transparent);
      --border-strong: color-mix(in srgb, var(--color-neutral-dark-1000) 22%, transparent);
      --border-accent: var(--brand-accent-500);
      --border-danger: color-mix(in srgb, var(--color-red-400) 45%, transparent);

      --action-primary-bg: var(--color-neutral-dark-1000);
      --action-primary-text: var(--color-neutral-dark-50);
      --focus-ring-color: var(--border-accent);

      --status-open-bg: color-mix(in srgb, var(--color-neutral-dark-1000) 8%, transparent);
      --status-open-text: var(--color-neutral-dark-700);
      --status-in-progress-bg: color-mix(in srgb, var(--color-blue-400) 16%, transparent);
      --status-in-progress-text: var(--color-blue-400);
      --status-done-bg: color-mix(in srgb, var(--color-green-400) 14%, transparent);
      --status-done-text: var(--color-green-400);
      --status-overdue-bg: color-mix(in srgb, var(--color-red-400) 14%, transparent);
      --status-overdue-text: var(--color-red-400);

      --status-on-track-bg: color-mix(in srgb, var(--color-green-400) 14%, transparent);
      --status-on-track-text: var(--color-green-400);
      --status-at-risk-bg: color-mix(in srgb, var(--color-orange-400) 14%, transparent);
      --status-at-risk-text: var(--color-orange-400);
      --status-off-track-bg: color-mix(in srgb, var(--color-red-400) 14%, transparent);
      --status-off-track-text: var(--color-red-400);

      --progress-fill-0: var(--color-progress-dark-0);
      --progress-fill-1: var(--color-progress-dark-1);
      --progress-fill-2: var(--color-progress-dark-2);
      --progress-fill-3: var(--color-progress-dark-3);
      --progress-fill-4: var(--color-progress-dark-4);
    }
  }

  [data-theme="dark"] {
    --text-primary: var(--color-neutral-dark-900);
    --text-secondary: var(--color-neutral-dark-600);
    --text-muted: var(--color-neutral-dark-500);
    --text-brand: var(--brand-accent-300);
    --text-accent: var(--brand-accent-300);
    --text-danger: var(--color-red-400);
    --text-warning: var(--color-orange-400);

    --background-primary: var(--color-neutral-dark-100);
    --background-secondary: var(--color-neutral-dark-150);
    --background-inset: var(--color-neutral-dark-50);
    --background-floating: var(--color-neutral-dark-200);
    --background-danger: color-mix(in srgb, var(--color-red-400) 14%, transparent);

    --surface-hover: color-mix(in srgb, var(--color-white) 6%, transparent);
    --surface-selected: color-mix(in srgb, var(--color-white) 8%, transparent);
    --surface-highlight: color-mix(in srgb, var(--color-white) 8%, transparent);
    --surface-accent: color-mix(in srgb, var(--brand-accent-500) 24%, transparent);
    --surface-contrast-bg: var(--color-neutral-dark-1000);
    --surface-contrast-text: var(--color-neutral-dark-50);

    --border-subtle: color-mix(in srgb, var(--color-neutral-dark-1000) 8%, transparent);
    --border-default: color-mix(in srgb, var(--color-neutral-dark-1000) 10%, transparent);
    --border-strong: color-mix(in srgb, var(--color-neutral-dark-1000) 22%, transparent);
    --border-accent: var(--brand-accent-500);
    --border-danger: color-mix(in srgb, var(--color-red-400) 45%, transparent);

    --action-primary-bg: var(--color-neutral-dark-1000);
    --action-primary-text: var(--color-neutral-dark-50);
    --focus-ring-color: var(--border-accent);

    --status-open-bg: color-mix(in srgb, var(--color-neutral-dark-1000) 8%, transparent);
    --status-open-text: var(--color-neutral-dark-700);
    --status-in-progress-bg: color-mix(in srgb, var(--color-blue-400) 16%, transparent);
    --status-in-progress-text: var(--color-blue-400);
    --status-done-bg: color-mix(in srgb, var(--color-green-400) 14%, transparent);
    --status-done-text: var(--color-green-400);
    --status-overdue-bg: color-mix(in srgb, var(--color-red-400) 14%, transparent);
    --status-overdue-text: var(--color-red-400);

    --status-on-track-bg: color-mix(in srgb, var(--color-green-400) 14%, transparent);
    --status-on-track-text: var(--color-green-400);
    --status-at-risk-bg: color-mix(in srgb, var(--color-orange-400) 14%, transparent);
    --status-at-risk-text: var(--color-orange-400);
    --status-off-track-bg: color-mix(in srgb, var(--color-red-400) 14%, transparent);
    --status-off-track-text: var(--color-red-400);

    --progress-fill-0: var(--color-progress-dark-0);
    --progress-fill-1: var(--color-progress-dark-1);
    --progress-fill-2: var(--color-progress-dark-2);
    --progress-fill-3: var(--color-progress-dark-3);
    --progress-fill-4: var(--color-progress-dark-4);
  }
}