/*
 * maxanoo – Design-Tokens (dunkel als Standard).
 * Wird im Frontend und im Editor-Canvas geladen, damit beide gleich aussehen.
 */

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("fonts/bricolage-grotesque-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: "Bricolage Grotesque";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("fonts/bricolage-grotesque-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: "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 */
    --mx-bg: #08090d;
    --mx-bg-raised: #0e1016;
    --mx-surface: #12151d;
    --mx-surface-2: #181c26;
    --mx-border: #222735;
    --mx-border-strong: #343b4e;
    --mx-text: #d9dde7;
    --mx-heading: #f4f6fb;
    --mx-muted: #8d95a8;

    /* Signalfarbe Mint und Begleitfarbe */
    --mx-signal: #4ff0b4;
    --mx-signal-strong: #7dfccb;
    --mx-signal-ink: #04130d;
    --mx-signal-glow: rgb(79 240 180 / 18%);
    --mx-violet: #9d8cff;

    /* Schriften */
    --mx-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mx-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --mx-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    --mx-container: 1180px;
    --mx-radius: 12px;

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

    --blk-code-bg: #0b0d13;
    --blk-code-text: #d6dbe6;
    --hl-comment: #6b7389;
    --hl-keyword: #ff7ab6;
    --hl-string: #9ef0c9;
    --hl-number: #ffc66d;
    --hl-title: #a99bff;
    --hl-builtin: #6ec8ff;
    --hl-meta: #f0a875;
    --hl-deletion: #ff6b6b;

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

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