/* AUNIWA — Copyright (c) 2025-2026 Patrick Brand. Alle Rechte vorbehalten. */
/* ============================================================
   AUNIWA Design-Tokens
   Stand: 2026-05-26 (UI-2)
   Entscheidungen:
   - Brand: #5BC5C8 (Logo) + #007F82 (interaktiv)
   - Light Default + Dark Toggle
   - Cozy 56px Desktop / Comfortable 72px Tablet
   ============================================================ */

:root {
  /* ---------- ROOT FONT SIZE (für rem-Skalierung) ---------- */
  font-size: 100%;  /* = 16 px Standard, respektiert User-Zoom */

  /* ---------- SPACING (8-px-Raster, 4-px-Halbschritte) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- TYPOGRAFIE (rem, damit Browser-Zoom funktioniert) ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo,
               Consolas, monospace;

  --text-xs:   0.6875rem;   /* 11 px */
  --text-sm:   0.8125rem;   /* 13 px */
  --text-base: 0.875rem;    /* 14 px */
  --text-md:   1rem;        /* 16 px */
  --text-lg:   1.125rem;    /* 18 px */
  --text-xl:   1.375rem;    /* 22 px */
  --text-2xl:  1.75rem;     /* 28 px */
  --text-3xl:  2.25rem;     /* 36 px */

  --leading-tight:  1.2;
  --leading-table:  1.4;
  --leading-normal: 1.5;

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

  /* ---------- BRAND-SKALA (5BC5C8 / 007F82 + abgeleitet) ---------- */
  --color-brand-50:  #E8F7F8;
  --color-brand-100: #C7EFF0;
  --color-brand-300: #A5DDDF;
  --color-brand-500: #5BC5C8;   /* Logo, Akzent, Focus-Ring */
  --color-brand-600: #2A9D9F;   /* Hover */
  --color-brand-700: #007F82;   /* Buttons, Body-Links */
  --color-brand-800: #006568;   /* Active/Pressed */
  --color-brand-900: #004C4D;

  /* ---------- SEMANTISCHE FARBEN ---------- */
  --color-success:    #15803D;
  --color-success-bg: #DCFCE7;
  --color-warning:    #B45309;
  --color-warning-bg: #FEF3C7;
  --color-danger:     #DC2626;
  --color-danger-bg:  #FEE2E2;
  --color-info:       #1D4ED8;
  --color-accent-violet: #8B5CF6;
  --color-info-bg:    #DBEAFE;

  /* ---------- RADIEN ---------- */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 9999px;

  /* ---------- SCHATTEN (sparsam, Tufte-Prinzip) ---------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-2: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 8px 24px rgba(15, 23, 42, 0.12);

  /* ---------- ANIMATIONEN ---------- */
  --duration-fast:   100ms;
  --duration-normal: 150ms;  /* Patrick-Regel: Max für Reaktions-Animationen */
  --ease-standard:   cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------- TOUCH-TARGETS (WCAG + Patrick-Regel gradiert) ---------- */
  --tap-min:         24px;   /* WCAG 2.5.8 AA Minimum (Inline-Icons) */
  --tap-comfortable: 44px;   /* WCAG 2.5.5 AAA, Apple HIG */
  --tap-large:       56px;
  --tap-xl:          72px;   /* Patrick-Regel für primäre Aktionen Tablet */

  /* ---------- BREAKPOINTS (nur Doku — Media-Queries werten Hardcoded) ---------- */
  --bp-sm:  600px;
  --bp-md:  900px;
  --bp-lg:  1280px;
  --bp-xl:  1600px;
  --bp-2xl: 1920px;

  /* ---------- TABULAR NUMERALS ---------- */
  --numeric-features: "tnum" 1, "lnum" 1, "zero" 1;
}

/* ===========================================================
   LIGHT THEME (Default)
   =========================================================== */
:root,
[data-theme="light"] {
  /* Native Controls/Scrollbars/Datepicker/Autofill auf Light ausrichten.
     Beide Themes setzen color-scheme explizit -> kein Zustand ohne Vorgabe
     (z.B. initial vor JS-Toggle blitzt sonst inkonsistent). */
  color-scheme: light;
  --color-bg:               #FFFFFF;
  --color-surface:          #F8FAFC;
  --color-surface-hover:    #F1F5F9;
  --color-surface-active:   #E2E8F0;
  --color-border:           #E2E8F0;
  --color-border-strong:    #CBD5E1;
  --color-text:             #0F172A;
  --color-text-muted:       #475569;
  --color-text-faint:       #94A3B8;
  --color-link:             var(--color-brand-700);
  --color-link-hover:       var(--color-brand-800);
  --color-button-bg:        var(--color-brand-700);
  --color-button-text:      #FFFFFF;
  --color-button-bg-hover:  var(--color-brand-800);
  --color-backdrop:         rgba(15, 23, 42, 0.4);
  --color-focus-ring:       rgba(91, 197, 200, 0.45);
}

/* ===========================================================
   DARK THEME
   =========================================================== */
[data-theme="dark"] {
  /* Native Controls/Scrollbars/Datepicker/Autofill auf Dark ausrichten —
     loest hellen Default fuer Scrollbars + <select>-Popups in einem Schritt. */
  color-scheme: dark;
  --color-bg:               #0F172A;
  --color-surface:          #1E293B;
  --color-surface-hover:    #334155;
  --color-surface-active:   #475569;
  --color-border:           #334155;
  --color-border-strong:    #475569;
  --color-text:             #F8FAFC;
  --color-text-muted:       #CBD5E1;
  --color-text-faint:       #94A3B8;
  --color-link:             var(--color-brand-500);
  --color-link-hover:       var(--color-brand-300);
  --color-button-bg:        var(--color-brand-500);
  --color-button-text:      #0F172A;
  --color-button-bg-hover:  var(--color-brand-600);
  --color-backdrop:         rgba(0, 0, 0, 0.6);
  --color-focus-ring:       rgba(91, 197, 200, 0.6);

  /* Semantische Farben im Dark heller, für Kontrast */
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-danger:  #F87171;
  --color-info:    #60A5FA;

  /* Semantische Background-Tints im Dark — 15 % Alpha der Vordergrund-Tokens,
     ergibt dezente Tönungen statt greller Blöcke. (UI-3a-fix Nachzug) */
  --color-success-bg: rgba(74, 222, 128, 0.15);
  --color-warning-bg: rgba(251, 191, 36, 0.15);
  --color-danger-bg:  rgba(248, 113, 113, 0.15);
  --color-info-bg:    rgba(96, 165, 250, 0.15);
  --color-accent-violet: #A78BFA;
}

/* ===========================================================
   DENSITY-MODI
   =========================================================== */
:root,
[data-density="cozy"] {           /* DESKTOP-DEFAULT */
  --row-height:    56px;
  --row-padding-y: var(--space-3);   /* 12px */
  --row-padding-x: var(--space-4);   /* 16px */
  --row-font:      var(--text-base); /* 14px */
  --button-height: var(--tap-comfortable);  /* 44px */
}

[data-density="comfortable"] {    /* TABLET / PRODUKTION */
  --row-height:    72px;
  --row-padding-y: var(--space-4);   /* 16px */
  --row-padding-x: var(--space-5);   /* 24px */
  --row-font:      var(--text-md);   /* 16px */
  --button-height: var(--tap-xl);    /* 72px */
}

[data-density="compact"] {        /* DENSE, viele Zeilen */
  --row-height:    36px;
  --row-padding-y: var(--space-1);   /* 4px */
  --row-padding-x: var(--space-3);   /* 12px */
  --row-font:      var(--text-sm);   /* 13px */
  --button-height: 32px;
}

/* ===========================================================
   REDUCED MOTION (WCAG 2.3.3 + Patrick-Regel)
   Reaktions-Animationen werden deaktiviert.
   Status-Animationen müssen sich explizit über .status-animation
   markieren und sich selbst zurücknehmen.
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================
   GLOBALE BASIS (greift noch zurückhaltend, damit existierender
   Code nicht sofort überall anders aussieht — die echte Migration
   ist UI-3)
   =========================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--numeric-features);
  text-align: right;
  white-space: nowrap;
}

/* Focus-Ring konsistent für Accessibility */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ===========================================================
   TOP-BAR TOGGLE BUTTONS (Theme + Density)
   =========================================================== */
.topbar-toggle {
  width: var(--tap-comfortable);
  height: var(--tap-comfortable);
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--text-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: background var(--duration-normal) var(--ease-standard);
}

.topbar-toggle:hover {
  background: var(--color-surface-hover);
}