/* Sevenridge Design Tokens v1.0 – CSS Custom Properties
   Für vorkompiliertes Bootstrap 5.3: NACH bootstrap.min.css einbinden. */

@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("fonts/zilla-slab-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
	--sr-deep-ridge: #16281F;
	--sr-leaf: #2F6B4F;
	--sr-sprout: #9BD35A;
	--sr-dusk-amber: #D98E3A;
	--sr-mesa-sand: #F2EDE3;
	--sr-stone: #5E665C;
	--sr-mist: #E4E7E1;
	--sr-white: #FFFFFF;

	--sr-font-heading: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
	--sr-font-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
	--sr-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
	--sr-font-slab: "Zilla Slab", Georgia, serif;

	--sr-radius-card: 6px;
	--sr-radius-button: 999px;

	/* Bootstrap 5.3 – Laufzeit-Variablen (Hellmodus) */
	--bs-body-font-family: var(--sr-font-body);
	--bs-font-monospace: var(--sr-font-mono);
	--bs-body-color: var(--sr-deep-ridge);
	--bs-body-bg: var(--sr-white);
	--bs-secondary-color: var(--sr-stone);
	--bs-tertiary-bg: var(--sr-mesa-sand);
	--bs-border-color: var(--sr-mist);
	--bs-border-radius: var(--sr-radius-card);
	--bs-link-color: var(--sr-leaf);
	--bs-link-color-rgb: 47, 107, 79;
	--bs-link-hover-color: var(--sr-deep-ridge);
	--bs-link-hover-color-rgb: 22, 40, 31;
	--bs-primary: var(--sr-leaf);
	--bs-primary-rgb: 47, 107, 79;
	--bs-heading-color: var(--sr-deep-ridge);
	--bs-focus-ring-color: rgba(47, 107, 79, 0.45);
}

/* Dunkelmodus: neutrale Anthrazit-Flächen (tokens.json → color-dark, Entscheidung 01.10.2026) */
:root {
	--sr-dark-surface: #212529;
	--sr-dark-surface-raised: #2B3035;
	--sr-dark-border: #495057;
	--sr-dark-text-muted: #ADB5BD;
}

[data-bs-theme="dark"] {
	--bs-body-color: var(--sr-mesa-sand);
	--bs-body-bg: var(--sr-dark-surface);
	--bs-secondary-color: var(--sr-dark-text-muted);
	--bs-secondary-bg: var(--sr-dark-surface-raised);
	--bs-tertiary-bg: var(--sr-dark-surface-raised);
	--bs-border-color: var(--sr-dark-border);
	--bs-link-color: var(--sr-sprout);
	--bs-link-color-rgb: 155, 211, 90;
	--bs-link-hover-color: var(--sr-white);
	--bs-heading-color: var(--sr-white);
	--bs-focus-ring-color: rgba(155, 211, 90, 0.5);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--sr-font-heading); font-weight: 600; letter-spacing: -0.015em; }

/* Buttons im CI (vorkompiliertes Bootstrap) */
.btn { --bs-btn-border-radius: var(--sr-radius-button); --bs-btn-font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--sr-leaf); --bs-btn-border-color: var(--sr-leaf); --bs-btn-hover-bg: var(--sr-deep-ridge); --bs-btn-hover-border-color: var(--sr-deep-ridge); --bs-btn-active-bg: var(--sr-deep-ridge); --bs-btn-active-border-color: var(--sr-deep-ridge); --bs-btn-disabled-bg: var(--sr-leaf); --bs-btn-disabled-border-color: var(--sr-leaf); }
/* Dunkelmodus: Primär = Sprout (Entscheidung 01.10.2026, Variante B) – Dusk Amber bleibt der Warnung vorbehalten */
[data-bs-theme="dark"] .btn-primary { --bs-btn-bg: var(--sr-sprout); --bs-btn-border-color: var(--sr-sprout); --bs-btn-color: var(--sr-deep-ridge); --bs-btn-hover-bg: var(--sr-mesa-sand); --bs-btn-hover-border-color: var(--sr-mesa-sand); --bs-btn-hover-color: var(--sr-deep-ridge); --bs-btn-active-bg: var(--sr-mesa-sand); --bs-btn-active-border-color: var(--sr-mesa-sand); --bs-btn-active-color: var(--sr-deep-ridge); --bs-btn-disabled-bg: var(--sr-sprout); --bs-btn-disabled-border-color: var(--sr-sprout); --bs-btn-disabled-color: var(--sr-deep-ridge); }

/* Bootstrap-Komponenten auf Palette (ergänzt 01.10.2026, Befunde ci-brand-guardian):
   OK/Erfolg = Leaf und Neutral = Stone laut Addendum B4; Fokus, Schalter, Accordion, Dropdown ohne Bootstrap-Blau. */
:root {
	--bs-success: var(--sr-leaf);
	--bs-success-rgb: 47, 107, 79;
	--bs-secondary: var(--sr-stone);
	--bs-secondary-rgb: 94, 102, 92;
}
.btn { --bs-btn-focus-shadow-rgb: 47, 107, 79; }
.btn-secondary { --bs-btn-bg: var(--sr-stone); --bs-btn-border-color: var(--sr-stone); --bs-btn-hover-bg: var(--sr-deep-ridge); --bs-btn-hover-border-color: var(--sr-deep-ridge); }
.btn-outline-secondary { --bs-btn-color: var(--sr-stone); --bs-btn-border-color: var(--sr-stone); --bs-btn-hover-bg: var(--sr-stone); --bs-btn-hover-border-color: var(--sr-stone); --bs-btn-hover-color: var(--sr-white); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--sr-leaf); box-shadow: 0 0 0 0.25rem rgba(47, 107, 79, 0.25); }
.form-check-input:checked { background-color: var(--sr-leaf); border-color: var(--sr-leaf); }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232F6B4F'/%3e%3c/svg%3e"); }
.accordion { --bs-accordion-active-bg: var(--sr-mesa-sand); --bs-accordion-active-color: var(--sr-deep-ridge); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(47, 107, 79, 0.25); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--sr-leaf); --bs-dropdown-link-active-color: var(--sr-white); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--sr-leaf); }
.page-link { --bs-pagination-active-bg: var(--sr-leaf); --bs-pagination-active-border-color: var(--sr-leaf); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(47, 107, 79, 0.25); }

[data-bs-theme="dark"] .btn { --bs-btn-focus-shadow-rgb: 155, 211, 90; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--sr-dark-text-muted); --bs-btn-border-color: var(--sr-dark-border); --bs-btn-hover-bg: var(--sr-dark-surface-raised); --bs-btn-hover-color: var(--sr-mesa-sand); }
[data-bs-theme="dark"] :is(.form-control, .form-select, .form-check-input):focus { border-color: var(--sr-sprout); box-shadow: 0 0 0 0.25rem rgba(155, 211, 90, 0.3); }
[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--sr-sprout); border-color: var(--sr-sprout); }
[data-bs-theme="dark"] .accordion { --bs-accordion-active-bg: var(--sr-dark-surface-raised); --bs-accordion-active-color: var(--sr-sprout); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(155, 211, 90, 0.3); }

/* Statusfarben (Addendum B4): OK = Leaf, Warnung = Dusk Amber (Text darauf Deep Ridge), Info = Stone,
   Alarm = Bootstrap-Rot #DC3545 (vorläufig, OFFEN) – Status immer zusätzlich mit Icon/Text. */
:root {
	--bs-warning: var(--sr-dusk-amber);
	--bs-warning-rgb: 217, 142, 58;
	--bs-warning-text-emphasis: var(--sr-deep-ridge);
	--bs-warning-bg-subtle: var(--sr-mesa-sand);
	--bs-warning-border-subtle: var(--sr-dusk-amber);
	--bs-info: var(--sr-stone);
	--bs-info-rgb: 94, 102, 92;
	--bs-info-text-emphasis: var(--sr-deep-ridge);
	--bs-info-bg-subtle: var(--sr-mist);
	--bs-info-border-subtle: var(--sr-stone);
	--bs-success-text-emphasis: var(--sr-deep-ridge);
	--bs-success-bg-subtle: var(--sr-mesa-sand);
	--bs-success-border-subtle: var(--sr-leaf);
	--bs-secondary-text-emphasis: var(--sr-deep-ridge);
	--bs-secondary-bg-subtle: var(--sr-mist);
	--bs-secondary-border-subtle: var(--sr-stone);
}
[data-bs-theme="dark"] {
	--bs-warning-text-emphasis: var(--sr-mesa-sand);
	--bs-warning-bg-subtle: var(--sr-dark-surface-raised);
	--bs-warning-border-subtle: var(--sr-dusk-amber);
	--bs-info-text-emphasis: var(--sr-mesa-sand);
	--bs-info-bg-subtle: var(--sr-dark-surface-raised);
	--bs-info-border-subtle: var(--sr-dark-border);
	--bs-success-text-emphasis: var(--sr-sprout);
	--bs-success-bg-subtle: var(--sr-dark-surface-raised);
	--bs-success-border-subtle: var(--sr-sprout);
	--bs-secondary-text-emphasis: var(--sr-mesa-sand);
	--bs-secondary-bg-subtle: var(--sr-dark-surface-raised);
	--bs-secondary-border-subtle: var(--sr-dark-border);
}
.text-bg-warning { color: var(--sr-deep-ridge) !important; }
.text-bg-info { color: var(--sr-white) !important; }
.btn-warning { --bs-btn-bg: var(--sr-dusk-amber); --bs-btn-border-color: var(--sr-dusk-amber); --bs-btn-color: var(--sr-deep-ridge); --bs-btn-hover-bg: var(--sr-deep-ridge); --bs-btn-hover-border-color: var(--sr-deep-ridge); --bs-btn-hover-color: var(--sr-white); }

/* Diagramm-/Messgrößenfarben (Addendum B5) – je Modus; Linien zusätzlich über Strichart unterscheidbar (WCAG 1.4.1). */
:root {
	--sr-chart-amber: var(--sr-dusk-amber);   /* Temperatur, Licht */
	--sr-chart-leaf: var(--sr-leaf);          /* Luftfeuchte, Bodenfeuchte */
	--sr-chart-ridge: var(--sr-deep-ridge);   /* VPD, DLI, Nährstoffe */
	--sr-chart-stone: var(--sr-stone);        /* CO₂, EC, pH, Druck, neutral */
}
[data-bs-theme="dark"] {
	--sr-chart-leaf: var(--sr-mist);
	--sr-chart-ridge: var(--sr-sprout);
	--sr-chart-stone: var(--sr-dark-text-muted);
}

/* Messwerte */
.sr-messwert { font-family: var(--sr-font-mono); font-variant-numeric: tabular-nums; }
/* Absender */
.sr-absender { font-family: var(--sr-font-slab); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sr-dusk-amber); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--sr-leaf); outline-offset: 2px; }
[data-bs-theme="dark"] :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--sr-sprout); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }