/* Book Fairy Tales — Tsubaki-chō dark theme (from _docs/Dark theme website redesign) */

:root {
    --bft-bg: #10131c;
    --bft-bg-elevated: #161a26;
    --bft-bg-card: #191d2b;
    --bft-bg-panel: #171b28;
    --bft-bg-input: #12151f;
    --bft-bg-nav: rgba(16, 19, 28, 0.72);

    --bft-text: #eef1f7;
    --bft-text-muted: #b8c0d2;
    --bft-text-subtle: #aab3c6;
    --bft-text-faint: #7c8398;

    --bft-accent: #7cb3dd;
    --bft-accent-hover: #93c4e8;
    --bft-accent-on: #0c1119;

    --bft-torii: #dd5342;
    --bft-green: #7a9b6e;

    --bft-border: rgba(220, 228, 245, 0.1);
    --bft-border-strong: rgba(220, 228, 245, 0.18);

    /* Legacy variable names used across Blade layouts */
    --bft-orange: var(--bft-accent);
    --bft-white: var(--bft-text);
    --bft-dark: var(--bft-bg);
    --bft-muted: var(--bft-text-muted);
    --bft-card: var(--bft-bg-card);

    --bft-accent-a06: rgba(124, 179, 221, 0.06);
    --bft-accent-a08: rgba(124, 179, 221, 0.08);
    --bft-accent-a10: rgba(124, 179, 221, 0.1);
    --bft-accent-a28: rgba(124, 179, 221, 0.28);
    --bft-accent-a30: rgba(124, 179, 221, 0.3);
    --bft-accent-a32: rgba(124, 179, 221, 0.32);
    --bft-accent-a40: rgba(124, 179, 221, 0.4);

    --bft-torii-a06: rgba(221, 83, 66, 0.06);
    --bft-torii-a12: rgba(221, 83, 66, 0.12);
    --bft-torii-a14: rgba(221, 83, 66, 0.14);
    --bft-torii-a18: rgba(221, 83, 66, 0.18);
    --bft-torii-a20: rgba(221, 83, 66, 0.2);
    --bft-torii-a28: rgba(221, 83, 66, 0.28);
    --bft-torii-a35: rgba(221, 83, 66, 0.35);

    --bft-link: var(--bft-accent);
    --bft-link-hover: var(--bft-accent-hover);

    --bft-font-body: "Zen Kaku Gothic New", system-ui, sans-serif;
    --bft-font-display: "Zen Kaku Gothic New", system-ui, sans-serif;
    --bft-font-pixel: "DotGothic16", monospace;

    --bft-shadow-accent: 0 10px 30px rgba(124, 179, 221, 0.22);
    --bft-shadow-card: 0 24px 80px rgba(0, 0, 0, 0.45);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--bft-font-body);
    color: var(--bft-text);
    background-color: var(--bft-bg);
    background-image:
        radial-gradient(520px 520px at 8% -8%, rgba(124, 179, 221, 0.16), transparent 65%),
        radial-gradient(460px 460px at 92% 28%, rgba(221, 83, 66, 0.14), transparent 65%);
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--bft-accent);
    color: var(--bft-accent-on);
}

a {
    color: var(--bft-link);
}

a:hover {
    color: var(--bft-link-hover);
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}