/*
 * Design Tokens — „Systemschnitt"
 * Farbpaar-Kontraste sind gegen WCAG 2.2 AA geprüft (siehe Kommentare).
 * Dekorative vs. funktionale Grautöne sind bewusst getrennt: Linien/Icons
 * dürfen unter 4.5:1 liegen, echter Text und Bedienelement-Kanten nicht.
 *
 * Theming: Light-Werte stehen auf :root. Dark-Werte werden zweimal
 * überschrieben — einmal für prefers-color-scheme (System-Standard),
 * einmal für den manuellen [data-theme="dark"]-Toggle (gewinnt immer).
 */

:root {
    /* ---------- Farbe: Light (Standard) ---------- */
    --color-bg: #F5F3ED;
    --color-bg-alt: #EFEDE4;
    --color-surface: #FFFFFF;

    --color-text: #1B1E1B;             /* 15.16:1 auf --color-bg */
    --color-text-muted: #5C6055;       /* 5.81:1 auf --color-bg */
    --color-text-on-accent: #1B1E1B;   /* 8.25:1 auf --color-accent */

    --color-line-decorative: #E4E1D7;  /* nur dekorativ, bewusst sehr dezent */
    --color-line-functional: #86836F;  /* 3.45:1 — Inputs, interaktive Kanten */

    --color-accent: #7BC94A;           /* Fläche/Icon/Border, NIE Fließtext auf hell */
    --color-accent-text: #2F6019;      /* 6.74:1 — Links, kleine grüne Textelemente */
    --color-accent-soft: rgb(123 201 74 / 12%);

    --color-danger: #9A2A17;           /* 6.96:1 auf --color-bg */
    --color-danger-soft: rgb(154 42 23 / 8%);

    --shadow-edge: 2px 2px 0 0 rgb(27 30 27 / 8%);
    --shadow-edge-hover: 3px 3px 0 0 rgb(27 30 27 / 14%);
    --shadow-focus-ring: 0 0 0 3px rgb(123 201 74 / 35%);

    /* ---------- Typografie ---------- */
    --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --text-display: clamp(2.75rem, 2.05rem + 3.1vw, 5.75rem);
    --text-h1: clamp(2.25rem, 1.85rem + 1.7vw, 3.25rem);
    --text-h2: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
    --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
    --text-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-micro: 0.75rem;

    --leading-tight: 1.05;
    --leading-snug: 1.25;
    --leading-normal: 1.55;
    --leading-relaxed: 1.7;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.12em;

    /* ---------- Spacing (4px-Basis) ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 10rem;

    /* ---------- Radius / Borders ---------- */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --border-width: 1px;

    /* ---------- Motion ----------
       JS liest prefers-reduced-motion selbst über matchMedia, nicht über
       diese Tokens — hier nur die Werte für rein CSS-basierte Übergänge. */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 500ms;
    --duration-draw: 1200ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Z-Index ---------- */
    --z-base: 0;
    --z-elevated: 10;
    --z-sticky: 100;
    --z-header: 200;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1100;

    /* ---------- Layout ----------
       Breakpoints (Referenz, in @media-Regeln als Literalwerte verwendet):
       xs 375 / sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1600 */
    --content-max: 1440px;
    --content-max-wide: 1800px;
    --content-padding-inline: clamp(1.25rem, 4vw, 4rem);
    --ruler-column-width: 3.5rem;
}

/* ---------- Farbe: Dark (System-Präferenz) ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #121412;
        --color-bg-alt: #191C18;
        --color-surface: #1E221C;

        --color-text: #F2F0E8;             /* 16.22:1 */
        --color-text-muted: #B9BBB0;       /* 9.52:1 */
        --color-text-on-accent: #121412;   /* 12.22:1 */

        --color-line-decorative: #242621; /* bewusst sehr dezent */
        --color-line-functional: #6E7263;  /* 3.75:1 */

        --color-accent: #8FE85B;           /* 12.22:1, im Dark Mode auch als Text nutzbar */
        --color-accent-text: #8FE85B;
        --color-accent-soft: rgb(143 232 91 / 14%);

        --color-danger: #FF6B4A;           /* 6.57:1 */
        --color-danger-soft: rgb(255 107 74 / 12%);

        --shadow-edge: 2px 2px 0 0 rgb(0 0 0 / 35%);
        --shadow-edge-hover: 3px 3px 0 0 rgb(0 0 0 / 50%);
        --shadow-focus-ring: 0 0 0 3px rgb(143 232 91 / 40%);
    }
}

/* ---------- Farbe: Dark (manueller Toggle, gewinnt immer) ---------- */
:root[data-theme="dark"] {
    --color-bg: #121412;
    --color-bg-alt: #191C18;
    --color-surface: #1E221C;

    --color-text: #F2F0E8;
    --color-text-muted: #B9BBB0;
    --color-text-on-accent: #121412;

    --color-line-decorative: #242621; /* bewusst sehr dezent */
    --color-line-functional: #6E7263;

    --color-accent: #8FE85B;
    --color-accent-text: #8FE85B;
    --color-accent-soft: rgb(143 232 91 / 14%);

    --color-danger: #FF6B4A;
    --color-danger-soft: rgb(255 107 74 / 12%);

    --shadow-edge: 2px 2px 0 0 rgb(0 0 0 / 35%);
    --shadow-edge-hover: 3px 3px 0 0 rgb(0 0 0 / 50%);
    --shadow-focus-ring: 0 0 0 3px rgb(143 232 91 / 40%);
}