/* Buckler Automation – Designsystem v1 (06.10.2026)
   Hell ist Standard. Dunkel über <html data-theme="dark"> oder Systemeinstellung.
   Quelle: 01_Designsystem.md – diese Datei nie direkt ändern, sondern dort. */

:root {
  /* Flächen */
  --bua-page: #F7F9FB;
  --bua-surface: #FFFFFF;
  --bua-surface-muted: #EDF2F7;

  /* Rahmen */
  --bua-border: #DCE4EC;
  --bua-border-strong: #B9C6D4;

  /* Text */
  --bua-text: #1C2A38;
  --bua-text-muted: #53657A;
  --bua-text-on-primary: #FFFFFF;

  /* Marke */
  --bua-primary: #0047AB;
  --bua-primary-dark: #003A8C;
  --bua-primary-tint: #E4EEFA;
  --bua-anchor: #384959;
  --bua-calm: #6A89A7;

  /* Status */
  --bua-success: #1E7A5A;
  --bua-success-tint: #E3F2EC;
  --bua-warning: #C08A2E;
  --bua-warning-tint: #FAF0DE;
  --bua-danger: #B23B2E;
  --bua-danger-tint: #FAE8E6;
  --bua-info: #0047AB;
  --bua-info-tint: #E4EEFA;

  /* Status-Kennzeichen */
  --bua-tag-gebaut: #1E7A5A;
  --bua-tag-erledigt: #2E8B6B;
  --bua-tag-entschieden: #0047AB;
  --bua-tag-geplant: #6A89A7;
  --bua-tag-offen: #C08A2E;
  --bua-tag-annahme: #5C5C99;
  --bua-tag-verworfen: #B23B2E;
  --bua-tag-ueberholt: #8A98A6;

  /* Pipeline */
  --bua-pipe-recherche: #A8B9C8;
  --bua-pipe-erstkontakt: #88BDF2;
  --bua-pipe-termin: #57B9FF;
  --bua-pipe-pitch: #1E7FD1;
  --bua-pipe-pilot: #0047AB;
  --bua-pipe-zahlend: #1E7A5A;
  --bua-pipe-ruhend: #C08A2E;
  --bua-pipe-abgeschlossen: #53657A;

  /* Diagramme, feste Reihenfolge */
  --bua-chart-1: #0047AB;
  --bua-chart-2: #57B9FF;
  --bua-chart-3: #6A89A7;
  --bua-chart-4: #5C5C99;
  --bua-chart-5: #1E7A5A;
  --bua-chart-6: #C08A2E;
  --bua-chart-7: #88BDF2;
  --bua-chart-8: #384959;

  /* Schrift */
  --bua-font-sans: "Source Sans 3", system-ui, sans-serif;
  --bua-font-serif: "Source Serif 4", Georgia, serif;
  --bua-font-numeric: "Source Sans 3", system-ui, sans-serif;

  --bua-text-xs: 0.75rem;   /* 12 */
  --bua-text-sm: 0.875rem;  /* 14 */
  --bua-text-base: 1rem;    /* 16 */
  --bua-text-lg: 1.25rem;   /* 20 */
  --bua-text-xl: 1.5rem;    /* 24 */
  --bua-text-2xl: 2rem;     /* 32 */
  --bua-text-3xl: 2.5rem;   /* 40 */
  --bua-leading-body: 1.6;
  --bua-leading-heading: 1.25;
  --bua-weight-regular: 400;
  --bua-weight-bold: 600;

  /* Abstände */
  --bua-space-1: 4px;
  --bua-space-2: 8px;
  --bua-space-3: 12px;
  --bua-space-4: 16px;
  --bua-space-6: 24px;
  --bua-space-8: 32px;
  --bua-space-12: 48px;
  --bua-space-16: 64px;

  /* Form */
  --bua-radius-sm: 4px;
  --bua-radius: 8px;
  --bua-radius-card: 12px;
  --bua-border-width: 1px;
  --bua-focus-width: 2px;
  --bua-shadow-float: 0 4px 12px rgba(28, 42, 56, 0.10);

  /* Maße */
  --bua-content-max: 1280px;
  --bua-prose-max: 72ch;
  --bua-sidebar-width: 240px;
  --bua-control-height: 40px;
}

[data-theme="dark"] {
  --bua-page: #1B2733;
  --bua-surface: #243442;
  --bua-surface-muted: #2C3E4E;

  --bua-border: #35485A;
  --bua-border-strong: #4A6076;

  --bua-text: #E9EFF5;
  --bua-text-muted: #A8B9C8;
  --bua-text-on-primary: #0E1B26;

  --bua-primary: #6FB1EF;
  --bua-primary-dark: #88BDF2;
  --bua-primary-tint: #1E3A52;
  --bua-anchor: #0F1A24;
  --bua-calm: #7E97B0;

  --bua-success: #3FA37E;
  --bua-success-tint: #17352B;
  --bua-warning: #E0A33A;
  --bua-warning-tint: #3A2E14;
  --bua-danger: #E8705F;
  --bua-danger-tint: #3B1E1A;
  --bua-info: #6FB1EF;
  --bua-info-tint: #1E3A52;

  --bua-shadow-float: 0 4px 12px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bua-page: #1B2733;
    --bua-surface: #243442;
    --bua-surface-muted: #2C3E4E;
    --bua-border: #35485A;
    --bua-border-strong: #4A6076;
    --bua-text: #E9EFF5;
    --bua-text-muted: #A8B9C8;
    --bua-text-on-primary: #0E1B26;
    --bua-primary: #6FB1EF;
    --bua-primary-dark: #88BDF2;
    --bua-primary-tint: #1E3A52;
    --bua-anchor: #0F1A24;
    --bua-calm: #7E97B0;
    --bua-success: #3FA37E;
    --bua-success-tint: #17352B;
    --bua-warning: #E0A33A;
    --bua-warning-tint: #3A2E14;
    --bua-danger: #E8705F;
    --bua-danger-tint: #3B1E1A;
    --bua-info: #6FB1EF;
    --bua-info-tint: #1E3A52;
    --bua-shadow-float: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
}

body {
  background: var(--bua-page);
  color: var(--bua-text);
  font-family: var(--bua-font-sans);
  font-size: var(--bua-text-base);
  line-height: var(--bua-leading-body);
}

table, .bua-numeric {
  font-variant-numeric: tabular-nums;
}

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