/* Bromberger Design System, Referenz vom 3. Oktober 2026 (Steffen).
   Leistungsnachweisapp, 2026-10-15: Akzent Bromberger-Blau statt Petrol.
   Umgestellt ist NUR der Farbwinkel (205 -> 243, der Winkel von #235a81);
   Helligkeiten und Saettigungen sind Steffens. Die Familie heisst deshalb
   --bp-blau-* statt --bp-petrol-*, die Neutralen sind minimal blau getoent. */
/* Farb-Primitive in OKLCH. Fuenf Familien, je zehn Stufen mit identischer
   Helligkeitstreppe — gleiche Stufe = gleiche wahrgenommene Helligkeit, quer ueber alle Familien.

   NIE direkt in Komponenten verwenden. Komponenten nutzen ausschliesslich die
   semantische Ebene aus theme.css.

   Neutral ist nicht neutral-grau, sondern minimal blau-getoent (Hue 243, Chroma <= 0.014).
   Das bindet Flaechen und Akzent zusammen. */
:root{
  --bp-neutral-0:oklch(1 0 0);
  --bp-neutral-50:oklch(0.985 0.003 243);
  --bp-neutral-100:oklch(0.965 0.005 243);
  --bp-neutral-200:oklch(0.925 0.007 243);
  --bp-neutral-300:oklch(0.865 0.009 243);
  --bp-neutral-400:oklch(0.755 0.011 243);
  --bp-neutral-500:oklch(0.635 0.012 243);
  --bp-neutral-600:oklch(0.525 0.013 243);
  --bp-neutral-700:oklch(0.425 0.014 243);
  --bp-neutral-800:oklch(0.315 0.014 243);
  --bp-neutral-900:oklch(0.235 0.014 243);
  --bp-neutral-950:oklch(0.175 0.013 243);
  --bp-neutral-1000:oklch(0.128 0.012 243);

  --bp-blau-50:oklch(0.965 0.018 243);
  --bp-blau-100:oklch(0.930 0.035 243);
  --bp-blau-200:oklch(0.875 0.055 243);
  --bp-blau-300:oklch(0.790 0.075 243);
  --bp-blau-400:oklch(0.690 0.090 243);
  --bp-blau-500:oklch(0.600 0.095 243);
  --bp-blau-600:oklch(0.520 0.092 243);
  --bp-blau-700:oklch(0.445 0.082 243);
  --bp-blau-800:oklch(0.360 0.066 243);
  --bp-blau-900:oklch(0.285 0.050 243);

  --bp-amber-50:oklch(0.970 0.030 75);
  --bp-amber-100:oklch(0.935 0.060 75);
  --bp-amber-200:oklch(0.885 0.095 73);
  --bp-amber-300:oklch(0.825 0.125 70);
  --bp-amber-400:oklch(0.765 0.140 66);
  --bp-amber-500:oklch(0.705 0.145 62);
  --bp-amber-600:oklch(0.625 0.135 58);
  --bp-amber-700:oklch(0.525 0.115 55);
  --bp-amber-800:oklch(0.420 0.090 52);
  --bp-amber-900:oklch(0.330 0.070 50);

  --bp-green-50:oklch(0.965 0.022 152);
  --bp-green-100:oklch(0.928 0.048 152);
  --bp-green-200:oklch(0.868 0.080 152);
  --bp-green-300:oklch(0.790 0.105 153);
  --bp-green-400:oklch(0.712 0.120 154);
  --bp-green-500:oklch(0.632 0.120 155);
  --bp-green-600:oklch(0.548 0.110 156);
  --bp-green-700:oklch(0.462 0.092 157);
  --bp-green-800:oklch(0.372 0.072 158);
  --bp-green-900:oklch(0.295 0.055 159);

  --bp-red-50:oklch(0.966 0.018 27);
  --bp-red-100:oklch(0.928 0.040 27);
  --bp-red-200:oklch(0.868 0.075 27);
  --bp-red-300:oklch(0.782 0.120 27);
  --bp-red-400:oklch(0.692 0.160 27);
  --bp-red-500:oklch(0.618 0.190 27);
  --bp-red-600:oklch(0.548 0.195 27);
  --bp-red-700:oklch(0.470 0.170 27);
  --bp-red-800:oklch(0.385 0.135 27);
  --bp-red-900:oklch(0.305 0.100 27);
}

/* Semantische Farbebene — die EINZIGE Farbebene, die Komponenten benutzen duerfen.

   Drei Themes ueber [data-theme] auf <html>:
     (kein Attribut) / "hell"  — Standard, Buero und Innenraum
     "dunkel"                  — Abend, Fahrzeug, dunkle Umgebung
     "kontrast"                — direkte Sonne auf der Baustelle: maximaler Kontrast,
                                 kraeftigere Linien, keine getoenten Flaechen

   Drei Akzente ueber [data-accent] auf <html>. Sie setzen nur Farbwinkel und Saettigung;
   die Helligkeitsstufen kommen vom Theme. Ein Attribut, kein zweiter Farbsatz:
     (kein Attribut)             — Standard (hier: Bromberger-Blau)
     "marine"                    — naeher an der Firmenwebsite
     "forst"                     — Vermessung/Aussendienst

   prefers-color-scheme wird respektiert, solange der Nutzer nichts gewaehlt hat. */
:root{
  --bp-accent-h:243; /* @kind other */
  --bp-accent-c:0.086; /* @kind other */

  --bp-canvas:var(--bp-neutral-100);
  --bp-surface:var(--bp-neutral-0);
  --bp-surface-sunken:var(--bp-neutral-50);
  --bp-surface-hover:var(--bp-neutral-100);
  --bp-surface-active:var(--bp-neutral-200);
  --bp-surface-inverse:var(--bp-neutral-900);

  --bp-line:var(--bp-neutral-200);
  --bp-line-strong:var(--bp-neutral-300);

  --bp-text:var(--bp-neutral-800);
  --bp-text-strong:var(--bp-neutral-950);
  --bp-text-muted:var(--bp-neutral-600);
  --bp-text-faint:var(--bp-neutral-500);
  --bp-text-inverse:var(--bp-neutral-50);

  --bp-accent:oklch(0.445 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-hover:oklch(0.385 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-pressed:oklch(0.330 calc(var(--bp-accent-c) * 0.9) var(--bp-accent-h));
  --bp-accent-text:oklch(0.430 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-quiet:oklch(0.960 calc(var(--bp-accent-c) * 0.30) var(--bp-accent-h));
  --bp-accent-quiet-hover:oklch(0.930 calc(var(--bp-accent-c) * 0.45) var(--bp-accent-h));
  --bp-accent-line:oklch(0.880 calc(var(--bp-accent-c) * 0.60) var(--bp-accent-h));
  --bp-on-accent:oklch(0.995 0.003 var(--bp-accent-h));

  --bp-signal:var(--bp-amber-600);
  --bp-signal-quiet:var(--bp-amber-50);
  --bp-signal-line:var(--bp-amber-200);
  --bp-signal-text:var(--bp-amber-800);
  --bp-on-signal:var(--bp-neutral-0);

  --bp-ok:var(--bp-green-700);
  --bp-ok-quiet:var(--bp-green-50);
  --bp-ok-line:var(--bp-green-200);
  --bp-ok-text:var(--bp-green-800);
  --bp-on-ok:var(--bp-neutral-0);

  --bp-danger:var(--bp-red-700);
  --bp-danger-hover:var(--bp-red-800);
  --bp-danger-quiet:var(--bp-red-50);
  --bp-danger-line:var(--bp-red-200);
  --bp-danger-text:var(--bp-red-800);
  --bp-on-danger:var(--bp-neutral-0);

  --bp-focus:oklch(0.560 0.150 var(--bp-accent-h));
  --bp-scrim:oklch(0.175 0.013 243 / 0.55);
  --bp-shadow:oklch(0.235 0.014 210 / 0.14);
  --bp-shadow-soft:oklch(0.235 0.014 210 / 0.07);
  --bp-selection:oklch(0.880 calc(var(--bp-accent-c) * 0.6) var(--bp-accent-h));
}

[data-accent='marine']{--bp-accent-h:250; /* @kind other */ --bp-accent-c:0.125; /* @kind other */}
[data-accent='forst']{--bp-accent-h:152; /* @kind other */ --bp-accent-c:0.095; /* @kind other */}

[data-theme='dunkel']{
  color-scheme:dark;
  --bp-accent-c:0.105; /* @kind other */

  --bp-canvas:var(--bp-neutral-1000);
  --bp-surface:var(--bp-neutral-950);
  --bp-surface-sunken:oklch(0.150 0.012 243);
  --bp-surface-hover:var(--bp-neutral-900);
  --bp-surface-active:var(--bp-neutral-800);
  --bp-surface-inverse:var(--bp-neutral-100);

  --bp-line:oklch(0.290 0.012 243);
  --bp-line-strong:oklch(0.380 0.013 243);

  --bp-text:var(--bp-neutral-300);
  --bp-text-strong:var(--bp-neutral-50);
  --bp-text-muted:var(--bp-neutral-400);
  --bp-text-faint:var(--bp-neutral-500);
  --bp-text-inverse:var(--bp-neutral-950);

  --bp-accent:oklch(0.760 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-hover:oklch(0.820 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-pressed:oklch(0.700 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-text:oklch(0.800 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-quiet:oklch(0.290 calc(var(--bp-accent-c) * 0.55) var(--bp-accent-h));
  --bp-accent-quiet-hover:oklch(0.340 calc(var(--bp-accent-c) * 0.65) var(--bp-accent-h));
  --bp-accent-line:oklch(0.420 calc(var(--bp-accent-c) * 0.70) var(--bp-accent-h));
  --bp-on-accent:oklch(0.160 0.020 var(--bp-accent-h));

  --bp-signal:var(--bp-amber-400);
  --bp-signal-quiet:oklch(0.300 0.045 62);
  --bp-signal-line:oklch(0.420 0.070 60);
  --bp-signal-text:var(--bp-amber-300);
  --bp-on-signal:var(--bp-neutral-1000);

  --bp-ok:var(--bp-green-400);
  --bp-ok-quiet:oklch(0.295 0.040 154);
  --bp-ok-line:oklch(0.405 0.060 155);
  --bp-ok-text:var(--bp-green-300);
  --bp-on-ok:var(--bp-neutral-1000);

  --bp-danger:var(--bp-red-400);
  --bp-danger-hover:var(--bp-red-300);
  --bp-danger-quiet:oklch(0.300 0.060 27);
  --bp-danger-line:oklch(0.415 0.090 27);
  --bp-danger-text:var(--bp-red-300);
  --bp-on-danger:var(--bp-neutral-1000);

  --bp-focus:oklch(0.800 0.130 var(--bp-accent-h));
  --bp-scrim:oklch(0.100 0.010 212 / 0.70);
  --bp-shadow:oklch(0 0 0 / 0.55);
  --bp-shadow-soft:oklch(0 0 0 / 0.35);
  --bp-selection:oklch(0.400 calc(var(--bp-accent-c) * 0.8) var(--bp-accent-h));
}

[data-theme='kontrast']{
  --bp-accent-c:0.100; /* @kind other */

  --bp-canvas:var(--bp-neutral-0);
  --bp-surface:var(--bp-neutral-0);
  --bp-surface-sunken:var(--bp-neutral-100);
  --bp-surface-hover:var(--bp-neutral-200);
  --bp-surface-active:var(--bp-neutral-300);

  --bp-line:var(--bp-neutral-500);
  --bp-line-strong:var(--bp-neutral-800);

  --bp-text:oklch(0.16 0 0);
  --bp-text-strong:oklch(0.08 0 0);
  --bp-text-muted:oklch(0.34 0.008 243);
  --bp-text-faint:oklch(0.42 0.008 243);

  --bp-accent:oklch(0.360 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-hover:oklch(0.300 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-pressed:oklch(0.255 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-text:oklch(0.340 var(--bp-accent-c) var(--bp-accent-h));
  --bp-accent-quiet:var(--bp-neutral-0);
  --bp-accent-quiet-hover:oklch(0.945 calc(var(--bp-accent-c) * 0.4) var(--bp-accent-h));
  --bp-accent-line:oklch(0.360 var(--bp-accent-c) var(--bp-accent-h));

  --bp-signal-quiet:var(--bp-neutral-0);
  --bp-signal-line:var(--bp-amber-700);
  --bp-signal-text:var(--bp-amber-900);
  --bp-ok-quiet:var(--bp-neutral-0);
  --bp-ok-line:var(--bp-green-700);
  --bp-ok-text:var(--bp-green-900);
  --bp-danger-quiet:var(--bp-neutral-0);
  --bp-danger-line:var(--bp-red-700);
  --bp-danger-text:var(--bp-red-900);

  --bp-shadow:oklch(0 0 0 / 0.30);
  --bp-shadow-soft:oklch(0 0 0 / 0.16);
}

/* Systemvorgabe: es gibt bewusst KEINEN @media(prefers-color-scheme)-Block.
   `applyStoredTheme()` (components/layout/ThemePicker.jsx) loest die Wahl "system" beim
   Start auf und setzt data-theme. Grund: eine einzige Quelle der Wahrheit — sonst gaebe es
   zwei Dunkel-Definitionen, die auseinanderlaufen. */

/* Typografie. Zwei getrennte Treppen: eine funktionale fuer die Oberflaeche,
   eine fuer Display. Zwischen Fliesstext (16) und Seitentitel (28) liegt Faktor 1.75 —
   die Hierarchie ist sichtbar, ohne dass es zehn Zwischenstufen braucht.
   Unter 12px wird nichts gesetzt. */
:root{
  --bp-text-xs:0.75rem;    /* 12 — Meta, Overline, Tabellen-Kopf */
  --bp-text-sm:0.875rem;   /* 14 — Labels, Tabellenzellen, Sekundaertext */
  --bp-text-md:1rem;       /* 16 — Fliesstext, Eingaben. Basis. */
  --bp-text-lg:1.125rem;   /* 18 — hervorgehobener Text, Listentitel */

  --bp-display-xs:1.375rem;/* 22 — Kartentitel, Dialogtitel */
  --bp-display-sm:1.75rem; /* 28 — Seitentitel */
  --bp-display-md:2.25rem; /* 36 — Kennzahl */
  --bp-display-lg:3rem;    /* 48 — grosse Kennzahl, Login */

  --bp-weight-regular:400;
  --bp-weight-medium:500;
  --bp-weight-semibold:600;
  --bp-weight-display:700;

  --bp-leading-display:1.12;
  --bp-leading-tight:1.3;
  --bp-leading-normal:1.55;
  --bp-leading-loose:1.7;

  --bp-tracking-display:-0.018em;
  --bp-tracking-normal:0;
  --bp-tracking-overline:0.06em;

  --bp-measure:68ch;
}

/* Abstaende. Der Zahlenwert IST der Pixelwert — kein Kopfrechnen.
   Basisraster 4px, ab 24 in Achterschritten.

   Rhythmus statt Gleichmass: enge Werte (2–8) binden Zusammengehoeriges,
   grosse Werte (32–64) trennen Abschnitte. Immer denselben Wert zu nehmen ist ein Fehler. */
:root{
  --bp-space-2:0.125rem;
  --bp-space-4:0.25rem;
  --bp-space-6:0.375rem;
  --bp-space-8:0.5rem;
  --bp-space-12:0.75rem;
  --bp-space-16:1rem;
  --bp-space-20:1.25rem;
  --bp-space-24:1.5rem;
  --bp-space-32:2rem;
  --bp-space-40:2.5rem;
  --bp-space-48:3rem;
  --bp-space-64:4rem;
  --bp-space-80:5rem;
}

/* Form. Radien bleiben klein: Steuerelemente 6, Flaechen 10, schwebende Ebenen 14.
   Pille nur fuer Chips und Punkte — nie fuer Karten.

   Linie ODER Schatten, nie beides. Karten und Leisten bekommen eine 1px-Linie und
   KEINEN Schatten. Schatten ist ausschliesslich fuer Ebenen, die wirklich schweben:
   Popover, Sheet, Dialog. */
:root{
  --bp-radius-xs:3px;
  --bp-radius-sm:6px;
  --bp-radius-md:10px;
  --bp-radius-lg:14px;
  --bp-radius-pill:999px;

  --bp-line-width:1px;
  --bp-line-width-emphasis:2px;
  --bp-focus-width:2px;
  --bp-focus-offset:2px;

  --bp-elevation-popover:0 4px 12px -2px var(--bp-shadow),0 1px 3px var(--bp-shadow-soft);
  --bp-elevation-sheet:0 -10px 32px -12px var(--bp-shadow);
  --bp-elevation-dialog:0 24px 56px -20px var(--bp-shadow),0 4px 12px var(--bp-shadow-soft);
}