/* Generiert von tools/build_tokens.py (Repository naegler-hamburg-design-system)
   aus tokens/tokens.json – nicht von Hand bearbeiten. Vor main.css einbinden. */

:root {
    /* Tinte und Papier */
    --ink-900: #16202b;
    --ink-700: #2c3846;
    --ink-500: #5c6570;
    --ink-300: #b6bcc3;
    --bg: #f7f4ef;
    --bg-subtle: #ede8e0;
    --surface: #ffffff;
    --surface-2: #ede8e0;
    --border: #dfd9d0;
    --border-soft: #e4ded5;
    --text: var(--ink-500);
    --text-muted: var(--ink-500);
    --heading: var(--ink-900);

    /* Keine Schatten auf der Seite – nur Overlays verlassen sie. */
    --shadow-sm: none; --shadow: none; --shadow-lg: none;
    --shadow-overlay: 0 24px 60px rgba(22, 32, 43, 0.22);
    --glow-soft: none; --glow: none;

    /* Standard-Akzent: Petrol (Software) */
    --accent: #2c7a75; --accent-2: #226460;
    --accent-fg: #1f5b57; --accent-soft: #deebe9;
    --accent-on-dark: #4fa9a2; --on-accent: #ffffff;

    /* Status – nur in Hinweisen, Badges, Tabellenzellen */
    --status-ok: #2c7a75;
    --status-open: #94701b;
    --status-overdue: #a33a32;
    --status-neutral: var(--ink-500);

    /* Dunkle Fläche des Code-Blocks */
    --code-bg: #16202b;
    --code-bar: #1f2b38;
    --code-border: #2c3846;
    --code-text: #e8e4dd;
    --code-muted: #9aa4b0;
    --code-accent: #7fd4cd;
    --code-accent-soft: #1f3b39;
    --overlay-ink: 22, 32, 43;

    --font-head: Archivo, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Schriftstufen: fluide bis zum Handy, der Token ist die Obergrenze */
    --step--1: clamp(0.813rem, 0.8rem + 0.06vw, 0.875rem);
    --step-0: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
    --step-1: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
    --step-2: clamp(1.188rem, 1.09rem + 0.42vw, 1.3125rem);
    --step-3: clamp(1.5rem, 1.3rem + 0.85vw, 1.75rem);
    --step-4: clamp(1.875rem, 1.55rem + 1.4vw, 2.5rem);
    --step-5: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);
    --leading-display: 1.03; --tracking-display: -0.03em;
    --leading-h1: 1.1; --tracking-h1: -0.025em;
    --leading-h2: 1.2; --tracking-h2: -0.02em;
    --leading-h3: 1.3; --tracking-h3: -0.01em;

    /* Abstände – 4-px-Skala */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-24: 6rem;
    --space-2xs: var(--space-1); --space-xs: var(--space-2); --space-s: var(--space-4);
    --space-m: var(--space-6); --space-l: var(--space-8); --space-xl: var(--space-12);

    /* Ecken: Bänder · bedienbar · Karten · Pille */
    --radius-band: 0;
    --radius-sm: 0.25rem;
    --radius: 0.375rem;
    --radius-lg: 0.375rem;
    --radius-pill: 999px;

    --control-h: 2.5rem; --control-h-sm: 2rem; --control-h-lg: 3rem;

    /* Layout: Inhaltsbreite, Textmaß, Vorlauf */
    --container: 75rem;
    --container-narrow: 38.75rem;
    --measure: 38.75rem;
    --measure-lead: 47.5rem;
    --gutter: var(--space-6);
}

/* Ein Akzent pro Fläche – vier Felder */
.facet-software {
    --accent: #2c7a75; --accent-2: #226460;
    --accent-fg: #1f5b57; --accent-soft: #deebe9;
    --accent-on-dark: #4fa9a2; --on-accent: #ffffff;
}
.facet-podcast {
    --accent: #94701b; --accent-2: #7c5d16;
    --accent-fg: #7a5c13; --accent-soft: #f5ebd5;
    --accent-on-dark: #c39424; --on-accent: #ffffff;
}
.facet-katastrophenschutz, .facet-drk {
    --accent: #a33a32; --accent-2: #8a312a;
    --accent-fg: #7e2b24; --accent-soft: #f3dfdd;
    --accent-on-dark: #d8867f; --on-accent: #ffffff;
}
.facet-mediation {
    --accent: #35618c; --accent-2: #2b506f;
    --accent-fg: #294b6b; --accent-soft: #dfe7f0;
    --accent-on-dark: #749fca; --on-accent: #ffffff;
}