/*
 * Izakaya design tokens — mirrors project/tokens.json of the Izakaya design system.
 * Components read only these variables; never hard-code colours.
 */
:root {
    color-scheme: light dark;

    /* Colour — light theme (default) */
    --surface: #faf8f5;
    --surface-raised: #ffffff;
    --surface-sunken: #f2efea;
    --surface-inverse: #111111;
    --line: #e4dfd8;
    --line-strong: #8a847c;
    --ink: #111111;
    --ink-muted: #5b5650;
    --ink-inverse: #faf8f5;
    --red: #e0010b;
    --red-text: #b60008;
    --red-soft: #fdeceb;
    --on-red: #ffffff;
    --matcha: #3b6b2f;
    --matcha-soft: #e8f0e3;
    --amber: #8a5200;
    --amber-soft: #fbefd9;
    --link: var(--red-text);

    /* Type */
    --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
    --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

    /* Spacing — 4px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-full: 9999px;

    /* Origami fold */
    --fold-sm: 14px;
    --fold-lg: 28px;

    /* Shadow */
    --shadow-sm: 0 1px 2px #1111110d, 0 2px 6px #11111110;
    --shadow-lg: 0 6px 12px #11111112, 0 18px 36px -8px #11111124;
    --focus-ring: 0 0 0 2px #faf8f5, 0 0 0 4px #111111;

    /* Layout (app-level, not part of tokens.json) */
    --container-max: 1200px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface: #111111;
        --surface-raised: #1b1b1b;
        --surface-sunken: #0a0a0a;
        --surface-inverse: #faf8f5;
        --line: #2e2c2a;
        --line-strong: #7a756e;
        --ink: #f5f2ed;
        --ink-muted: #a9a39b;
        --ink-inverse: #111111;
        --red-text: #ff5a5f;
        --red-soft: #3a0d0f;
        --matcha: #8cc47a;
        --matcha-soft: #1c2a17;
        --amber: #f0b35a;
        --amber-soft: #332410;
        --shadow-sm: 0 1px 3px #000000b3;
        --shadow-lg: 0 16px 32px -6px #000000cc;
        --focus-ring: 0 0 0 2px #111111, 0 0 0 4px #f5f2ed;
    }
}

:root[data-theme="dark"] {
    --surface: #111111;
    --surface-raised: #1b1b1b;
    --surface-sunken: #0a0a0a;
    --surface-inverse: #faf8f5;
    --line: #2e2c2a;
    --line-strong: #7a756e;
    --ink: #f5f2ed;
    --ink-muted: #a9a39b;
    --ink-inverse: #111111;
    --red-text: #ff5a5f;
    --red-soft: #3a0d0f;
    --matcha: #8cc47a;
    --matcha-soft: #1c2a17;
    --amber: #f0b35a;
    --amber-soft: #332410;
    --shadow-sm: 0 1px 3px #000000b3;
    --shadow-lg: 0 16px 32px -6px #000000cc;
    --focus-ring: 0 0 0 2px #111111, 0 0 0 4px #f5f2ed;
}

/*
 * Japanese pages: Figtree and Outfit have no Japanese glyphs, so Noto Sans JP follows them in every stack
 * (Latin text keeps the brand fonts, Japanese falls through to Noto Sans JP).
 */
:root:lang(ja) {
    --font-display: "Outfit", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    --font-sans: "Figtree", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}