/*
 * Memorani – Design-Tokens: Creme, Pflaume, Terrakotta, Gold; Fraunces und Source Sans 3.
 * Wird im Frontend und im Editor-Canvas geladen, damit beide gleich aussehen.
 */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/fraunces-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: "Source Sans 3";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url("fonts/source-sans-3-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;
}

:root {
    color-scheme: light;

    /* Creme und Pflaume: warm, ruhig, vertrauenswürdig */
    --t-bg: #fdf8f3;
    --t-bg-raised: #fffcf9;
    --t-surface: #f7ece4;
    --t-surface-2: #f0dfd3;
    --t-border: #ecdcd0;
    --t-border-strong: #d9c0b0;
    --t-text: #3a2a35;
    --t-heading: #2a1b28;
    --t-muted: #76636c;
    --t-header-bg: rgb(253 248 243 / 90%);
    --t-grid-line: rgb(200 92 64 / 14%);

    /* Terrakotta als Signalfarbe, Gold für kleine Lichtpunkte */
    --t-signal: #b8472f;
    --t-signal-strong: #933522;
    --t-signal-ink: #ffffff;
    --t-signal-glow: rgb(184 71 47 / 9%);
    --t-gold: #d29a3c;
    --t-gold-soft: rgb(210 154 60 / 35%);
    --t-blush: #f6dcd2;

    /* Schriften: Fraunces für Überschriften, Source Sans 3 für Text */
    --t-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --t-display: "Fraunces", Georgia, "Times New Roman", serif;
    --t-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --t-container: 1140px;
    --t-radius: 14px;
    --t-button-radius: 999px;

    /* Block-Tokens (siehe public/assets/blocks.css) */
    --blk-bg: var(--t-bg);
    --blk-text: var(--t-text);
    --blk-heading: var(--t-heading);
    --blk-muted: var(--t-muted);
    --blk-surface: var(--t-surface);
    --blk-border: var(--t-border);
    --blk-accent: var(--t-signal);
    --blk-accent-contrast: var(--t-signal-ink);
    --blk-link: var(--t-signal);
    --blk-info: #3d6a8a;
    --blk-tip: #3f7a2e;
    --blk-warning: #a8651a;
    --blk-danger: #b3352b;
    --blk-section-dark-bg: #2a1b28;
    --blk-section-dark-text: #f7ece4;

    --blk-code-bg: #f7efe8;
    --blk-code-text: #3a2a35;
    --hl-comment: #857d6e;
    --hl-keyword: #a3361f;
    --hl-string: #3f6b2a;
    --hl-number: #933522;
    --hl-title: #6b3fa0;
    --hl-builtin: #8a5a12;
    --hl-meta: #2e6b5a;
    --hl-deletion: #9b1c1c;

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

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