/*
 * gridline – Design-Tokens: Asphalt dunkel, Renngrün als Signalfarbe.
 * Wird im Frontend und im Editor-Canvas geladen, damit beide gleich aussehen.
 */

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-display: swap;
    font-weight: 800;
    src: url("fonts/barlow-condensed-latin-800-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-display: swap;
    font-weight: 800;
    src: url("fonts/barlow-condensed-latin-ext-800-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: dark;

    /* Grundfarben: Asphalt */
    --gl-bg: #0a0c0b;
    --gl-bg-raised: #0f1211;
    --gl-surface: #141816;
    --gl-surface-2: #1b201d;
    --gl-border: #242b27;
    --gl-border-strong: #38423c;
    --gl-text: #d6ddd8;
    --gl-heading: #f6f8f6;
    --gl-muted: #8b968f;

    /* Signalfarbe Renngrün, Begleitfarbe Curbstone-Rot */
    --gl-signal: #7ee03f;
    --gl-signal-strong: #a4f56e;
    --gl-signal-ink: #081304;
    --gl-signal-glow: rgb(126 224 63 / 17%);
    --gl-kerb: #ff4d3d;

    /* Schriften */
    --gl-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --gl-display: "Barlow Condensed", "Arial Narrow", "Inter", system-ui, sans-serif;
    --gl-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    --gl-container: 1200px;
    --gl-radius: 6px;
    /* Schräge der Streifen und Kanten (wie das Signet) */
    --gl-slant: 12deg;

    /* Block-Tokens (siehe public/assets/blocks.css) */
    --blk-bg: var(--gl-bg);
    --blk-text: var(--gl-text);
    --blk-heading: var(--gl-heading);
    --blk-muted: var(--gl-muted);
    --blk-surface: var(--gl-surface);
    --blk-border: var(--gl-border);
    --blk-accent: var(--gl-signal);
    --blk-accent-contrast: var(--gl-signal-ink);
    --blk-link: var(--gl-signal);
    --blk-info: #6ea8ff;
    --blk-tip: var(--gl-signal);
    --blk-warning: #ffb547;
    --blk-danger: var(--gl-kerb);
    --blk-section-dark-bg: #000000;
    --blk-section-dark-text: var(--gl-text);

    --blk-code-bg: #0b0d0c;
    --blk-code-text: #d6ddd8;
    --hl-comment: #6b766f;
    --hl-keyword: #ff7a6e;
    --hl-string: #b6f08c;
    --hl-number: #ffc66d;
    --hl-title: #8fd3ff;
    --hl-builtin: #6ec8ff;
    --hl-meta: #f0a875;
    --hl-deletion: #ff6b6b;

    --blk-font: var(--gl-font);
    --blk-font-display: var(--gl-display);
    --blk-mono: var(--gl-mono);
    --blk-measure: 70ch;
    --blk-wide: var(--gl-container);
    --blk-radius: var(--gl-radius);
}

html { background: var(--gl-bg); }
body { background: var(--gl-bg); color: var(--gl-text); }