:root {
    /* Primitive colors */
    --fc-neutral-000: #FFFFFF;
    --fc-neutral-025: #FAFBFC;
    --fc-neutral-050: #F3F6F8;
    --fc-neutral-100: #E9EDF1;
    --fc-neutral-200: #DAE1E7;
    --fc-neutral-300: #C2CCD5;
    --fc-neutral-400: #98A5B1;
    --fc-neutral-500: #6D7C89;
    --fc-neutral-600: #4E5C68;
    --fc-neutral-700: #37434D;
    --fc-neutral-800: #232D35;
    --fc-neutral-900: #141B21;

    --fc-petrol-050: #EDF6F8;
    --fc-petrol-100: #D8EBF0;
    --fc-petrol-300: #6FB4C2;
    --fc-petrol-500: #17788D;
    --fc-petrol-600: #0F5A6B;
    --fc-petrol-700: #0D5261;
    --fc-petrol-800: #0A424E;
    --fc-petrol-900: #06323B;

    --fc-success-bg: #E9F5F0;
    --fc-success-border: #B9DECD;
    --fc-success-fg: #12795A;
    --fc-warning-bg: #FDF4E6;
    --fc-warning-border: #F2D3A0;
    --fc-warning-fg: #8A4B08;
    --fc-danger-bg: #FEF3F2;
    --fc-danger-border: #F5C2BD;
    --fc-danger-fg: #B42318;
    --fc-info-bg: #EDF6F8;
    --fc-info-border: #C6E1E8;
    --fc-info-fg: #0F5A6B;
    --fc-neutral-status-bg: #F3F6F8;
    --fc-neutral-status-border: #DAE1E7;
    --fc-neutral-status-fg: #4E5C68;

    /* Semantic colors */
    --fc-bg-page: var(--fc-neutral-050);
    --fc-bg-surface: var(--fc-neutral-000);
    --fc-bg-surface-sunken: var(--fc-neutral-025);
    --fc-bg-surface-inverse: var(--fc-neutral-900);
    --fc-bg-brand-field: var(--fc-petrol-900);
    --fc-bg-overlay: rgba(20, 27, 33, .55);
    --fc-bg-hover: var(--fc-neutral-050);
    --fc-bg-selected: var(--fc-petrol-050);
    --fc-border: var(--fc-neutral-200);
    --fc-border-strong: var(--fc-neutral-300);
    --fc-border-subtle: var(--fc-neutral-100);
    --fc-border-focus: var(--fc-petrol-600);
    --fc-text-primary: var(--fc-neutral-800);
    --fc-text-body: var(--fc-neutral-700);
    --fc-text-secondary: var(--fc-neutral-500);
    --fc-text-muted: var(--fc-neutral-400);
    --fc-text-label-color: var(--fc-neutral-600);
    --fc-text-inverse: var(--fc-neutral-000);
    --fc-text-link: var(--fc-petrol-500);
    --fc-text-link-hover: var(--fc-petrol-700);
    --fc-action-bg: var(--fc-petrol-600);
    --fc-action-bg-hover: var(--fc-petrol-700);
    --fc-action-bg-active: var(--fc-petrol-800);
    --fc-action-fg: var(--fc-neutral-000);
    --fc-action-quiet-fg: var(--fc-petrol-600);
    --fc-action-quiet-bg-hover: var(--fc-petrol-050);
    --fc-danger-action-bg: var(--fc-danger-fg);
    --fc-danger-action-bg-hover: #961B12;
    --fc-action-disabled-bg: var(--fc-neutral-100);
    --fc-action-disabled-fg: var(--fc-neutral-400);

    /* Auf dunkler Fläche (Markenfeld Startseite, Portal-Topbar, Vorschau-Chrome) */
    --fc-on-dark-fg: var(--fc-neutral-000);
    --fc-on-dark-body: var(--fc-petrol-100);
    --fc-on-dark-secondary: var(--fc-petrol-300);
    --fc-on-dark-border: rgba(255, 255, 255, .16);
    --fc-on-dark-border-subtle: rgba(255, 255, 255, .10);
    --fc-on-dark-hover: rgba(255, 255, 255, .10);

    /* Typography */
    --fc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --fc-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
    --fc-text-display: 700 28px/34px var(--fc-font-sans);
    --fc-text-section: 700 24px/32px var(--fc-font-sans);
    --fc-text-lead: 400 18px/28px var(--fc-font-sans);
    --fc-text-h1: 700 26px/34px var(--fc-font-sans);
    --fc-text-h2: 600 20px/28px var(--fc-font-sans);
    --fc-text-h3: 600 17px/24px var(--fc-font-sans);
    --fc-text-body-lg: 400 16px/26px var(--fc-font-sans);
    --fc-type-body: 400 15px/23px var(--fc-font-sans);
    --fc-text-sm: 400 13px/20px var(--fc-font-sans);
    --fc-text-label: 600 13px/18px var(--fc-font-sans);
    --fc-text-caption: 500 12px/16px var(--fc-font-sans);
    --fc-text-overline: 700 11px/16px var(--fc-font-sans);

    /* Spacing and shape */
    --fc-space-1: 4px;
    --fc-space-2: 8px;
    --fc-space-3: 12px;
    --fc-space-4: 16px;
    --fc-space-5: 20px;
    --fc-space-6: 24px;
    --fc-space-8: 32px;
    --fc-space-10: 40px;
    --fc-space-12: 48px;
    --fc-space-16: 64px;
    --fc-radius-xs: 4px;
    --fc-radius-sm: 6px;
    --fc-radius-md: 10px;
    --fc-radius-lg: 14px;
    --fc-radius-pill: 999px;

    /* Elevation, motion and focus */
    --fc-elev-0: none;
    --fc-elev-1: 0 1px 2px rgba(20, 27, 33, .06);
    --fc-elev-2: 0 4px 12px rgba(20, 27, 33, .10);
    --fc-elev-3: 0 16px 32px rgba(20, 27, 33, .16);
    --fc-motion-fast: 120ms;
    --fc-motion-base: 180ms;
    --fc-motion-slow: 240ms;
    --fc-motion-spin: 700ms;
    --fc-ease: cubic-bezier(.2, 0, .2, 1);
    --fc-focus-ring: 0 0 0 3px rgba(15, 90, 107, .30);
    --fc-focus-ring-inverse: 0 0 0 3px rgba(255, 255, 255, .55);
    --fc-focus-ring-danger: 0 0 0 3px rgba(180, 35, 24, .28);

    /* Layering and containers */
    --fc-z-base: 0;
    --fc-z-sticky: 100;
    --fc-z-dropdown: 200;
    --fc-z-overlay: 900;
    --fc-z-modal: 950;
    --fc-z-toast: 1000;
    --fc-container-narrow: 560px;
    --fc-container-form: 760px;
    --fc-container-content: 1120px;
    --fc-container-work: 1360px;
    --fc-gutter: var(--fc-space-4);
}

/* Kontextklasse: Inhalte auf dunkler Marken-/Inversfläche.
   Bildet die semantischen Tokens auf die On-Dark-Werte um, damit dieselben
   Komponenten ohne eigene Varianten auf Dunkel funktionieren. */
.fc-on-dark {
    --fc-text-primary: var(--fc-on-dark-fg);
    --fc-text-body: var(--fc-on-dark-body);
    --fc-text-secondary: var(--fc-on-dark-secondary);
    --fc-text-label-color: var(--fc-on-dark-secondary);
    --fc-text-link: var(--fc-on-dark-fg);
    --fc-text-link-hover: var(--fc-on-dark-body);
    --fc-border: var(--fc-on-dark-border);
    --fc-border-strong: var(--fc-on-dark-border);
    --fc-border-subtle: var(--fc-on-dark-border-subtle);
    --fc-border-focus: var(--fc-neutral-000);
    --fc-focus-ring: var(--fc-focus-ring-inverse);
    --fc-bg-hover: var(--fc-on-dark-hover);
    --fc-action-bg: var(--fc-neutral-000);
    --fc-action-bg-hover: var(--fc-petrol-100);
    --fc-action-bg-active: var(--fc-petrol-300);
    --fc-action-fg: var(--fc-petrol-900);
    --fc-action-quiet-fg: var(--fc-neutral-000);
    --fc-action-quiet-bg-hover: var(--fc-on-dark-hover);
    color: var(--fc-text-body);
}

@media (min-width: 480px) {
    :root {
        --fc-text-display: 700 32px/38px var(--fc-font-sans);
    }
}

@media (min-width: 768px) {
    :root {
        --fc-gutter: var(--fc-space-6);
        --fc-text-display: 700 38px/44px var(--fc-font-sans);
        --fc-text-section: 700 26px/34px var(--fc-font-sans);
    }
}

@media (min-width: 1024px) {
    :root {
        --fc-gutter: var(--fc-space-8);
        --fc-text-display: 700 40px/46px var(--fc-font-sans);
    }
}

@media (min-width: 1280px) {
    :root {
        --fc-gutter: var(--fc-space-10);
        --fc-text-display: 700 44px/50px var(--fc-font-sans);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --fc-motion-fast: 0ms;
        --fc-motion-base: 0ms;
        --fc-motion-slow: 0ms;
    }
}