/* ============================================================
 * Boardly Design Tokens — Story 0007a
 * Aus .project/design/Boardly.html extrahiert.
 *
 * - 2 Themes:     [data-theme="graphit"] (Amber-Akzent) | [data-theme="salbei"] (Sage-Akzent)
 * - 3 Densities:  [data-density="compact"] | default | [data-density="spacious"]
 * - Selbst-gehosted Inter + JetBrains Mono (DSGVO-konform, kein CDN)
 *
 * Dokumentation: docs/design-tokens.md
 * ============================================================ */

/* ---------- Font-Hosting (self-hosted WOFF2, OFL-1.1 lizenziert) ---------- */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter-700.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/JetBrainsMono-500.woff2') format('woff2');
}

/* ---------- Theme-invariante Tokens ---------- */

:root {
    /* Type */
    --f-sans: 'Inter', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Radii */
    --r-1: 4px;
    --r-2: 6px;
    --r-3: 8px;
    --r-4: 12px;
    --r-pill: 999px;

    /* Density — Default */
    --density-card-pad: 12px;
    --density-card-gap: 8px;
    --density-col-gap: 14px;

    /* Motion — zentral geregelt (prefers-reduced-motion in base.css) */
    --ease: cubic-bezier(.2, .7, .2, 1);
}

[data-density="compact"] {
    --density-card-pad: 8px;
    --density-card-gap: 6px;
    --density-col-gap: 10px;
}

[data-density="spacious"] {
    --density-card-pad: 16px;
    --density-card-gap: 12px;
    --density-col-gap: 20px;
}

/* ---------- Theme: Graphit (near-black + amber accent) ---------- */
[data-theme="graphit"] {
    --bg: oklch(97% 0.003 80);
    --bg-sunken: oklch(94% 0.004 80);
    --surface: oklch(100% 0 0);
    --surface-2: oklch(98% 0.003 80);
    --line: oklch(90% 0.005 80);
    --line-strong: oklch(82% 0.006 80);

    --ink: oklch(18% 0.008 80);
    --ink-2: oklch(38% 0.008 80);
    --ink-3: oklch(58% 0.008 80);
    --ink-4: oklch(72% 0.007 80);          /* Deko-Only — Kontrast < 4.5:1 zu --bg */

    --accent: oklch(68% 0.14 62);          /* amber */
    --accent-ink: oklch(98% 0.02 80);
    --accent-soft: oklch(94% 0.04 70);

    --danger: oklch(58% 0.15 28);
    --good: oklch(58% 0.11 150);
    --info: oklch(58% 0.09 240);

    /* Label-Palette — konstante Chroma */
    --lb-1: oklch(62% 0.12 30);    /* coral */
    --lb-2: oklch(62% 0.12 80);    /* amber */
    --lb-3: oklch(62% 0.12 150);   /* green */
    --lb-4: oklch(62% 0.12 220);   /* blue */
    --lb-5: oklch(62% 0.12 290);   /* violet */
    --lb-6: oklch(62% 0.04 80);    /* neutral */
}

/* ---------- Theme: Salbei (warm off-white + sage accent) ---------- */
[data-theme="salbei"] {
    --bg: oklch(96.5% 0.012 105);
    --bg-sunken: oklch(93% 0.014 105);
    --surface: oklch(99% 0.006 105);
    --surface-2: oklch(97.5% 0.01 105);
    --line: oklch(88% 0.012 105);
    --line-strong: oklch(80% 0.014 105);

    --ink: oklch(24% 0.018 140);
    --ink-2: oklch(40% 0.015 140);
    --ink-3: oklch(56% 0.013 140);
    --ink-4: oklch(70% 0.012 140);         /* Deko-Only — Kontrast < 4.5:1 zu --bg */

    --accent: oklch(55% 0.09 155);         /* sage */
    --accent-ink: oklch(98% 0.01 140);
    --accent-soft: oklch(92% 0.04 155);

    --danger: oklch(56% 0.14 28);
    --good: oklch(55% 0.09 155);
    --info: oklch(58% 0.09 240);

    --lb-1: oklch(62% 0.11 30);
    --lb-2: oklch(62% 0.11 80);
    --lb-3: oklch(58% 0.1 155);
    --lb-4: oklch(60% 0.1 220);
    --lb-5: oklch(60% 0.11 290);
    --lb-6: oklch(64% 0.02 105);
}