/*
 * Zentrales Design-System der Webseite-Engine.
 * Änderungen an Farben, Schriften, Abständen, Radien, Rahmen und Schatten
 * werden hier vorgenommen und gelten anschließend seitenübergreifend.
 */
:root {
    /* Marken- und Statusfarben */
    --color-primary: #65b337;
    --color-primary-hover: #579e2f;
    --color-primary-active: #477f27;
    --color-primary-light: #65b337;
    --color-primary-dark: #181b18;
    --color-primary-soft: #f2f3f1;
    --color-primary-softer: #f8f9f7;
    --color-primary-shadow: rgba(101, 179, 55, 0.28);
    --color-accent: #65b337;
    --color-accent-hover: #76c94a;
    --color-accent-dark: #3f7425;
    --color-focus: #2b6418;
    --color-success: #2d6a44;
    --color-success-bg: #edf8f1;
    --color-error: #9d2c2c;
    --color-error-bg: #fff1f1;

    /* Text, Flächen und Linien */
    --color-text: #3f433f;
    --color-text-strong: #181b18;
    --color-muted: #686d68;
    --color-muted-light: #7c817c;
    --color-line: #dedfdd;
    --color-line-strong: #c4c7c3;
    --color-surface: #ffffff;
    --color-surface-alt: #f3f4f2;
    --color-surface-warm: #eceeeb;
    --color-surface-glass: rgba(255, 255, 255, 0.82);
    --color-overlay-soft: rgba(24, 27, 24, 0.05);

    /* Typografie – Schriftfamilien werden in fonts.css definiert */
    /* Zwei konsistente Textgrößen für alle Nicht-Überschriften. */
    --type-body: clamp(1rem, 0.965rem + 0.17vw, 1.125rem);
    --type-small: clamp(0.78rem, 0.75rem + 0.13vw, 0.875rem);
    --type-label: var(--type-small);
    --type-button: var(--type-body);
    --type-h1: clamp(3.8rem, 2rem + 6.8vw, 9.5rem);
    --type-h2: clamp(3rem, 1.7rem + 4.8vw, 7rem);
    --type-h3: clamp(1.35rem, 1.08rem + 0.85vw, 2.05rem);
    --line-height-body: 1.65;
    --line-height-heading: 0.96;
    --letter-spacing-label: 0.13em;

    /* Fluides Abstands-Raster */
    --space-2xs: clamp(0.35rem, 0.3rem + 0.18vw, 0.5rem);
    --space-xs: clamp(0.55rem, 0.48rem + 0.25vw, 0.8rem);
    --space-sm: clamp(0.8rem, 0.68rem + 0.4vw, 1.15rem);
    --space-md: clamp(1.1rem, 0.9rem + 0.65vw, 1.65rem);
    --space-lg: clamp(1.5rem, 1.15rem + 1.15vw, 2.5rem);
    --space-xl: clamp(2.2rem, 1.55rem + 2vw, 4rem);
    --space-2xl: clamp(3.5rem, 2.3rem + 3.8vw, 7rem);
    --space-3xl: clamp(5rem, 3rem + 6vw, 10rem);
    --space-section: clamp(6.5rem, 11vw, 12rem);
    --space-section-compact: clamp(3.5rem, 6vw, 6rem);
    --space-container-inline: clamp(1.25rem, 4vw, 3rem);

    /* Rahmen, Radien und Schatten */
    --border-width: 1px;
    --border-style: solid;
    --border-default: var(--border-width) var(--border-style) var(--color-line);
    --border-strong: var(--border-width) var(--border-style) var(--color-line-strong);
    --radius-xs: 0.55rem;
    --radius-sm: 0.85rem;
    --radius-md: 1.05rem;
    --radius-lg: 1.35rem;
    --radius-xl: 1.75rem;
    --radius-pill: 999px;
    --shadow-xs: 0 0.35rem 1rem rgba(20, 22, 20, 0.035);
    --shadow-sm: 0 1rem 2.6rem rgba(20, 22, 20, 0.055);
    --shadow-md: 0 1.5rem 3.4rem rgba(20, 22, 20, 0.075);
    --shadow-primary: 0 0.75rem 1.8rem var(--color-primary-shadow);
    --shadow-primary-hover: 0 1rem 2.4rem rgba(101, 179, 55, 0.36);

    /* Layout und Bedienelemente */
    --container: 92rem;
    --header-height: 5.25rem;
    --control-height: clamp(3rem, 3vw, 3.4rem);
    --control-height-small: 2.75rem;
    --control-padding-inline: clamp(1.15rem, 2vw, 1.55rem);
    --control-gap: 0.55rem;
    --transition-fast: 140ms ease;
    --transition: 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
    --transition-slow: 420ms cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Ebenen */
    --z-header: 1000;
    --z-navigation: 999;
    --z-overlay: 1100;

    /* Kompatibilitäts-Aliase für bestehende Newstool-Komponenten */
    --nt-green: var(--color-accent);
    --nt-green-light: var(--color-accent-hover);
    --nt-green-dark: var(--color-accent-dark);
    --nt-ink: var(--color-text-strong);
    --nt-text: var(--color-muted);
    --nt-soft: var(--color-surface-alt);
    --nt-soft-2: var(--color-primary-soft);
    --nt-line: rgba(101, 179, 55, 0.24);
    --nt-glass: var(--color-surface-glass);
    --nt-font-heading: var(--font-heading);
    --nt-font-body: var(--font-interface);

    /* Dokumentation der sieben Layout-Breakpoints (Media Queries nutzen feste Werte) */
    --breakpoint-small: 480px;
    --breakpoint-mobile: 767px;
    --breakpoint-mobile-wide: 880px;
    --breakpoint-tablet: 1024px;
    --breakpoint-tablet-wide: 1200px;
    --breakpoint-laptop: 1366px;
    --breakpoint-wide: 2400px;
}