/*
 * Design tokens for the "Signal" design system of Trainyard.
 * All colors, sizes and effects used anywhere in the app come from here.
 * Look: a track-diagram signal box ("Stelltisch") and German rail signage.
 * Raw colors follow the RAL traffic colors: Verkehrsblau (actions), Signalgelb (lit route, accent),
 * Verkehrsgrün/-rot (status), Anthrazitgrau (sidebar, code). Line colors identify courses.
 * Documentation: docs/DESIGN.md
 */

@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("../fonts/barlow-semi-condensed-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("../fonts/barlow-semi-condensed-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("../fonts/barlow-semi-condensed-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
    font-weight: 600 700;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
    font-weight: 500 700;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Palette (raw values, use the semantic tokens below in components) */
    --anthracite-900: #1f2629;
    --anthracite-800: #293133;   /* RAL 7016 Anthrazitgrau */
    --anthracite-600: #46524f;
    --grey-500: #545f5b;
    --grey-300: #b3bdb6;
    --grey-200: #ccd3cd;
    --panel-100: #e4e8e2;        /* Stelltisch: light grey-green panel */
    --panel-50: #f4f6f2;
    --white: #ffffff;
    --blue-600: #005387;         /* RAL 5017 Verkehrsblau */
    --blue-700: #003f68;
    --blue-100: #d4e2ec;
    --yellow-400: #f9a800;       /* RAL 1003 Signalgelb */
    --yellow-100: #fbecc4;
    --green-600: #236b3a;        /* RAL 6024 Verkehrsgrün, darkened for text */
    --green-100: #d6eadb;
    --red-600: #b8141c;          /* RAL 3020 Verkehrsrot, darkened for text */
    --red-100: #f5d9d8;
    --sky-600: #3f7fb3;
    --sky-100: #dbe7f1;

    /* Semantic colors */
    --color-bg: var(--panel-100);
    --color-surface: var(--panel-50);
    --color-surface-raised: var(--white);
    --color-surface-muted: #dde2dc;
    --color-text: var(--anthracite-800);
    --color-text-muted: var(--grey-500);
    --color-border: #778279;
    --color-border-subtle: var(--grey-200);

    /* Primary = Stellwerk blue (Verkehrsblau): every action (buttons, links, selection), in every course */
    --color-primary: var(--blue-600);
    --color-primary-hover: var(--blue-700);
    --color-primary-soft: var(--blue-100);
    --color-on-primary: var(--white);

    /* Accent = Signalgelb: the lit route, the current step, the switch point of the logo */
    --color-accent: var(--yellow-400);
    --color-accent-soft: var(--yellow-100);
    --color-on-accent: var(--anthracite-900);

    --color-ok: var(--green-600);
    --color-ok-soft: var(--green-100);
    --color-problem: var(--red-600);
    --color-problem-soft: var(--red-100);
    --color-on-problem: var(--white);
    --color-warning: var(--yellow-400);
    --color-warning-soft: var(--yellow-100);
    --color-info: var(--sky-600);
    --color-info-soft: var(--sky-100);

    /* Signal lamps (status lights). "off" is an unlit lamp in its housing. */
    --lamp-housing: var(--anthracite-800);
    --lamp-off: #4c5755;
    --lamp-green: #34c26a;
    --lamp-yellow: var(--yellow-400);
    --lamp-red: #ef3b36;
    /* White like the substitute signal (Ersatzsignal): go on despite a fault. Used for the streak freeze. */
    --lamp-white: #eef3ef;

    /* Sidebar is always dark (anthracite), in both themes */
    --color-nav-bg: var(--anthracite-800);
    --color-nav-text: #c4ccc8;
    --color-nav-text-strong: var(--white);
    --color-nav-line: #3d4749;
    --color-nav-active-bg: rgb(255 255 255 / 0.07);

    /* Code blocks and the signal-box panel are always dark, in both themes */
    --color-code-bg: var(--anthracite-800);
    --color-code-text: #e3e8e4;
    --color-panel-bg: var(--anthracite-800);
    --color-panel-tile: #313a3c;
    --color-panel-text: #e3e8e4;
    --color-panel-muted: #a6b0ac;
    --color-panel-track: #59645f;

    /* Zabbix severity colors (Zabbix defaults), for severity chips */
    --severity-not-classified: #97aab3;
    --severity-information: #7499ff;
    --severity-warning: #ffc859;
    --severity-average: #ffa059;
    --severity-high: #e97659;
    --severity-disaster: #e45959;

    /*
     * Line colors (like a metro map). Every course is a "line" with one of these colors.
     * --line-x-on is the text color on top of the line color, --line-x-soft a light tint.
     */
    --line-blue: #2f6fd0;
    --line-blue-on: var(--white);
    --line-blue-soft: #dce6f6;
    --line-coral: #f0603e;
    --line-coral-on: var(--anthracite-900);
    --line-coral-soft: #f9ddd4;
    --line-green: #1f9d5a;
    --line-green-on: var(--anthracite-900);
    --line-green-soft: #d6eedf;
    --line-amber: #e9a400;
    --line-amber-on: var(--anthracite-900);
    --line-amber-soft: #f8ebc6;
    --line-violet: #7454d8;
    --line-violet-on: var(--white);
    --line-violet-soft: #e6e0f7;
    --line-teal: #0f9aa8;
    --line-teal-on: var(--anthracite-900);
    --line-teal-soft: #d3eeef;

    /* Course context: set by <CourseFrame> from the course's line. Defaults = platform look. */
    --course-color: var(--color-primary);
    --course-on-color: var(--color-on-primary);
    --course-soft: var(--color-primary-soft);

    /* Typography: condensed signage face for headings, a technical grotesque for reading */
    --font-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.3125rem;
    --text-2xl: 1.625rem;
    --text-3xl: clamp(2rem, 1.6rem + 1.6vw, 2.625rem);
    --text-4xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);

    /* Spacing scale (4px base) */
    --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;

    /* Shape: small radii like enamel signs and panel tiles */
    --radius-sm: 0.1875rem;
    --radius-md: 0.3125rem;
    --radius-lg: 0.5rem;
    --radius-pill: 999px;
    --border-width: 1px;
    --rule-width: 3px;

    /* Only overlays (reconnect, error bar) float above the page */
    --shadow-overlay: 0 2px 4px rgb(31 38 41 / 0.12), 0 12px 32px rgb(31 38 41 / 0.18);

    /* Motion: short and calm, no overshoot */
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;

    /* Layout */
    --sidebar-width: 15.5rem;
    --content-max: 64rem;
    --prose-max: 44rem;
    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --color-bg: #161b1d;
        --color-surface: #1e2427;
        --color-surface-raised: #252c2f;
        --color-surface-muted: #2a3236;
        --color-text: #e3e8e4;
        --color-text-muted: #9ba6a2;
        --color-border: #5e6a69;
        --color-border-subtle: #323b3e;

        --color-primary: #7fb3e3;
        --color-primary-hover: #a2c8ec;
        --color-primary-soft: #1b3247;
        --color-on-primary: #0f1a22;

        --color-accent-soft: #3a3016;
        --color-ok: #5cc483;
        --color-ok-soft: #173325;
        --color-problem: #ff7a72;
        --color-problem-soft: #3d1f20;
        --color-on-problem: #1a0f0f;
        --color-warning-soft: #3a3016;
        --color-info: #7fb3e3;
        --color-info-soft: #1b2c3b;

        --lamp-housing: #0d1112;
        --lamp-off: #39423f;

        --color-nav-bg: #101415;
        --color-nav-line: #283033;
        --color-code-bg: #101415;
        --color-panel-bg: #101415;
        --color-panel-tile: #1a2022;
        --color-panel-track: #46504d;

        --line-blue: #6c9fef;
        --line-blue-on: var(--anthracite-900);
        --line-blue-soft: #1c2b44;
        --line-coral: #ff7a59;
        --line-coral-soft: #3d241d;
        --line-green: #45c47f;
        --line-green-soft: #163626;
        --line-amber: #f5b72a;
        --line-amber-soft: #3a3016;
        --line-violet: #a28cf5;
        --line-violet-on: var(--anthracite-900);
        --line-violet-soft: #2a2550;
        --line-teal: #3cc6d2;
        --line-teal-soft: #15363a;

        --shadow-overlay: 0 2px 4px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
    }
}