/* HR Design-Tokens — Designsprache des Buha-Projekts (hell, ruhig, Stahlblau als Akzent). */
:root {
  /* Neutraltöne bewusst warm (Papier statt Blech): Sie tragen den ganzen Tag,
     ohne kühl zu wirken. Der Akzent bleibt Stahlblau — Papier und Tinte. */
  --hr-bg: #f8f7f4;
  --hr-surface: #ffffff;
  --hr-surface-muted: #f3f1ec;
  --hr-border: #dedad3;
  --hr-border-soft: #ece9e3;
  --hr-text: #1c1f24;
  --hr-text-muted: #6a665f;
  --hr-text-soft: #726d65; /* ≥ 4,5:1 auf allen drei Flächen (WCAG AA) */

  /* Akzent: Standard Stahlblau; per Grundeinstellung (branding.js) übersteuerbar.
     --hr-primary ist der Ton für Schrift, Linien und Markierungen,
     --hr-primary-flaeche die Fläche unter weißer Schrift (Primärknopf, Zähler,
     Marke), --hr-primary-hover deren Hover. Im hellen Schema sind beide Töne
     gleich; im dunklen trennt branding.js sie, damit beide 4,5:1 erreichen
     (Z25-OBF-2). */
  --hr-primary: #1f4f7a;
  --hr-primary-flaeche: #1f4f7a;
  --hr-primary-hover: #193f62;
  --hr-primary-soft: #e7eef8;
  --hr-primary-rgb: 31, 79, 122;
  --hr-success: #256f4a;
  --hr-success-soft: #e6f2ec;
  --hr-warning: #8a5a00;
  --hr-warning-soft: #f8f0df;
  --hr-danger: #9f2d2d;
  --hr-danger-soft: #f9e9e9;
  --hr-info: #315f93;

  --hr-space-1: 4px;
  --hr-space-2: 8px;
  --hr-space-3: 12px;
  --hr-space-4: 16px;
  --hr-space-5: 24px;
  --hr-space-6: 32px;

  --hr-radius-sm: 6px;
  --hr-radius-md: 10px;
  --hr-radius-lg: 16px;

  --hr-font-xs: 12px;
  --hr-font-sm: 14px;
  --hr-font-md: 16px;
  --hr-font-lg: 20px;
  --hr-font-xl: 26px;

  --hr-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hr-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Geschichtete, weiche Schatten: Tiefe ohne Schwere — warm getönt, damit
     sie auf dem Papierton nicht grau ausblühen. */
  --hr-shadow-soft: 0 1px 2px rgba(38, 32, 24, 0.05), 0 1px 1px rgba(38, 32, 24, 0.03);
  --hr-shadow-mid: 0 2px 6px rgba(38, 32, 24, 0.07), 0 1px 2px rgba(38, 32, 24, 0.05);
  --hr-shadow-panel: 0 16px 40px rgba(38, 32, 24, 0.14), 0 4px 12px rgba(38, 32, 24, 0.08);

  /* Bewegung: kurz, entschieden, immer ease-out — nie verspielt. */
  --hr-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hr-dauer-schnell: 120ms;
  --hr-dauer: 180ms;

  /* Eingabe-Ring (weich, das Feld trägt zusätzlich die Primärfarbe als Rand)
     und Tastatur-Fokus (volle Primärfarbe mit Abstand — mindestens 3:1 zum
     Grund, WCAG 1.4.11; der weiche Ring allein erreichte etwa 1,3:1). */
  --hr-ring: 0 0 0 3px rgba(var(--hr-primary-rgb), 0.14);
  --hr-ring-fokus: 0 0 0 2px var(--hr-surface), 0 0 0 4px var(--hr-primary);

  /* Abdunkelnder Schleier hinter Modalen und Palette — in beiden Schemata dunkel. */
  --hr-overlay: rgba(16, 24, 40, 0.44);

  --hr-topbar-height: 56px;
  --hr-sidebar-width: 232px;

  --hr-z-topbar: 100;
  --hr-z-sidebar: 90;
  --hr-z-modal: 1000;
  --hr-z-toast: 1100;

  /* Dichte: Kompaktmodus reduziert Zeilenhöhen für hohe Informationsdichte. */
  --hr-row-height: 40px;
  --hr-input-height: 36px;
}

/* Kompaktmodus: spürbar höhere Informationsdichte — engere Zeilen, kleinere
   Grade, schmalere Abstände und Ränder. Eine Nutzerwahl, kein Firmenzwang. */
body[data-dichte="kompakt"] {
  --hr-row-height: 30px;
  --hr-input-height: 30px;
  --hr-font-sm: 13px;
  --hr-font-md: 15px;
  --hr-font-lg: 18px;
  --hr-font-xl: 22px;
  --hr-space-3: 10px;
  --hr-space-4: 12px;
  --hr-space-5: 18px;
  --hr-space-6: 24px;
  --hr-topbar-height: 48px;
  --hr-sidebar-width: 208px;
}

/* Dunkles Farbschema: dieselbe Sprache bei Nacht — warme, tiefe Flächen,
   Text mit Luft, Statusfarben heller für den Kontrast auf dunklem Grund.
   Der Akzent wird von branding.js schema-abhängig abgeleitet. */
body[data-schema="dunkel"] {
  --hr-bg: #15171b;
  --hr-surface: #1d2026;
  --hr-surface-muted: #262a31;
  --hr-border: #3a3f48;
  --hr-border-soft: #2c3038;
  --hr-text: #e8e6e1;
  --hr-text-muted: #a8a49c;
  --hr-text-soft: #9a958c;
  --hr-success: #58b98a;
  --hr-success-soft: #1d3229;
  --hr-warning: #d9a441;
  --hr-warning-soft: #33290f;
  --hr-danger: #e07070;
  --hr-danger-soft: #38201f;
  --hr-info: #7aa7d9;
  --hr-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
  --hr-shadow-mid: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --hr-shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  --hr-overlay: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

*:focus-visible {
  outline: 2px solid var(--hr-primary);
  outline-offset: 2px;
}