/* ============================================ 1. DESIGN TOKENS ============================================ */
:root {
    --bg-deep: #0a0a0a;
    --bg-surface-1: #141414;
    --bg-surface: #141414;
    --bg-surface-2: rgba(25, 28, 22, 0.55);
    --bg-surface-3: rgba(35, 32, 28, 0.45);
    --bg-input: rgba(20, 20, 20, 0.8);
    --text-primary: #e8e4df;
    --text-secondary: #aaa397;
    --text-muted: #777168;
    --accent-moss: #7a8c65;
    --accent-gold: #c4a96a;
    --accent-stone: #a39383;
    --accent-sakura: #c4919b;
    --confirm: #7a8c65;
    --warning: #c4a96a;
    --danger: #b06060;
    --overdue: #c06050;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-gold: rgba(196, 169, 106, 0.3);
    --font-serif: 'Noto Serif JP', serif;
    --font-sans: 'Inter', -apple-system, sans-serif;
    --shadow-warm: 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-glow-gold: 0 0 24px rgba(196, 169, 106, 0.12);
    --interactive-hover-bg: rgba(255, 255, 255, 0.07);
    --interactive-press-bg: rgba(196, 169, 106, 0.11);
    --interactive-focus-ring: 0 0 0 3px rgba(196, 169, 106, 0.16);
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: all 0.2s ease;
    --transition-layout: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --time-accent: #c4a96a;
    --widget-width: 350px;
    --app-viewport-height: 100dvh;
    --app-viewport-width: 100vw;
    --mobile-chat-keyboard-offset: 0px;
    --agenda-day-bg-odd: rgba(196, 169, 106, 0.045);
    --agenda-day-bg-even: transparent;
    --fs-large-title: 1.12rem;
    --fs-title-3: 1rem;
    --fs-body: 0.94rem;
    --fs-callout: 0.86rem;
    --fs-footnote: 0.78rem;
    --fs-caption: 0.72rem;
    --fs-caption-2: 0.68rem;
    --touch-target-min: 44px;
    --line-height-tight: 1.34;
    --line-height-relaxed: 1.5;

    /* --- Design language: spacing scale --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* --- Design language: radius --- */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* --- Design language: semantic surfaces (derive from theme palette) --- */
    --surface-canvas: var(--bg-deep);
    --surface-raised: var(--bg-surface-1);
    --surface-overlay: var(--bg-surface-2);
    --surface-sunken: var(--bg-surface-3);

    /* --- Design language: semantic accents/text --- */
    --accent-primary: var(--accent-gold);
    --text-kicker: var(--text-muted);

    /* --- Design language: motion (sheets, tab bar, overlays) --- */
    --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-sheet: 0.42s;
    --duration-quick: 0.2s;

    /* --- Design language: layout --- */
    --breakpoint-mobile: 768px;
    --tab-bar-height: 64px;
    --mobile-tab-bar-height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
    --sheet-radius: 26px;
}

@media (max-width: 767px) {
    :root {
        --fs-large-title: 1.26rem;
    }
}

:root[data-theme="light"] {
    --bg-deep: #f7f5ee;
    --bg-surface-1: #fffaf1;
    --bg-surface: #fffaf1;
    --bg-surface-2: rgba(250, 247, 238, 0.82);
    --bg-surface-3: rgba(239, 232, 219, 0.68);
    --bg-input: rgba(255, 250, 241, 0.88);
    --text-primary: #171613;
    --text-secondary: #5f564d;
    --text-muted: #81776c;
    --accent-moss: #788764;
    --accent-gold: #c06f42;
    --accent-stone: #9b7d62;
    --accent-sakura: #b9786d;
    --confirm: #788764;
    --warning: #c06f42;
    --danger: #a85645;
    --overdue: #b95845;
    --border-subtle: rgba(31, 28, 23, 0.09);
    --border-hover: rgba(31, 28, 23, 0.16);
    --border-gold: rgba(192, 111, 66, 0.28);
    --shadow-warm: 0 10px 36px rgba(76, 54, 33, 0.12);
    --shadow-soft: 0 4px 18px rgba(76, 54, 33, 0.08);
    --shadow-glow-gold: 0 0 28px rgba(192, 111, 66, 0.12);
    --interactive-hover-bg: rgba(192, 111, 66, 0.12);
    --interactive-press-bg: rgba(192, 111, 66, 0.16);
    --interactive-focus-ring: 0 0 0 3px rgba(192, 111, 66, 0.16);
    --agenda-day-bg-odd: rgba(192, 111, 66, 0.04);
    --agenda-day-bg-even: transparent;
}