/* Design tokens. Warna memakai OKLCH; netral digeser sedikit ke biru supaya serasi dengan kain/langit di gambar OG. */

@property --gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 0.45rem;
}

:root {
    color-scheme: light dark;

    /* Typography */
    --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
    --font-aksara: "Noto Sans Javanese", "Noto Serif Javanese", sans-serif;

    --text-s: 0.8125rem;
    --text-m: 1rem;
    --text-l: 1.25rem;
    --text-xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

    --radius-s: 0.375rem;
    --radius-m: 0.625rem;
    --radius-l: 1rem;

    /* Area kertas (kolom info, dialog) */
    --paper: oklch(97.5% 0.008 240);
    --paper-raised: oklch(100% 0 0);
    --paper-sunk: oklch(94% 0.016 240);
    --ink: oklch(24% 0.04 255);
    --ink-soft: oklch(45% 0.035 255);
    --line: oklch(87% 0.02 245);
    --link: oklch(42% 0.14 255);
    --btn-bg: oklch(42% 0.14 255);
    --btn-fg: oklch(98% 0.01 240);
    --done-bg: oklch(93% 0.09 92);
    --done-ink: oklch(32% 0.07 75);
    --danger: oklch(48% 0.19 27);
    --focus: oklch(42% 0.14 255);
    --backdrop: oklch(20% 0.06 255 / 0.62);

    /* Area papan (kain biru) */
    --stage: oklch(47% 0.15 255);
    --stage-ink: oklch(98% 0.01 240);
    --stage-soft: oklch(89% 0.04 245);
    --stage-line: oklch(98% 0.01 240 / 0.28);

    /* Kayu */
    --wood: oklch(82% 0.095 78);
    --wood-hi: oklch(93% 0.06 85);
    --wood-lo: oklch(66% 0.1 62);
    --wood-ink: oklch(30% 0.06 48);
    --wood-frame: oklch(42% 0.075 52);
    --wood-frame-lo: oklch(31% 0.06 48);
    --wood-hole: oklch(30% 0.055 50);

    --gold: oklch(85% 0.15 88);
    --gold-lo: oklch(68% 0.14 80);
    --gold-ink: oklch(27% 0.06 75);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: oklch(21% 0.03 255);
        --paper-raised: oklch(25% 0.035 255);
        --paper-sunk: oklch(27% 0.035 255);
        --ink: oklch(94% 0.01 240);
        --ink-soft: oklch(75% 0.02 245);
        --line: oklch(35% 0.03 255);
        --link: oklch(80% 0.1 245);
        --btn-bg: oklch(80% 0.1 245);
        --btn-fg: oklch(22% 0.04 255);
        --done-bg: oklch(40% 0.08 85);
        --done-ink: oklch(95% 0.05 90);
        --danger: oklch(75% 0.15 27);
        --focus: oklch(85% 0.12 245);
        --backdrop: oklch(10% 0.03 255 / 0.75);
    }
}