/* ============================================================
 * 秒秒薪时钟 —— 5 端共享设计令牌（由 @up-clock/tokens 生成）
 * 本文件自动生成，请勿手改；修改视觉规范请编辑 packages/tokens/src/index.ts
 * ============================================================ */

/* ── 亮色主题（默认） ── */
:root {
    --duration-micro: 80ms;
    --duration-quick: 150ms;
    --duration-fast: 250ms;
    --duration-medium: 350ms;
    --duration-slow: 600ms;
    --duration-very-slow: 700ms;
    --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: ease-in-out;
    --ease-out: ease-out;
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce-strong: cubic-bezier(0.34, 2.5, 0.64, 1);
    --ease-spring-critical: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring-modal: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-spring-settle: cubic-bezier(0.34, 1.2, 0.44, 1);
    --distance-micro: 2px;
    --distance-small: 4px;
    --distance-base: 8px;
    --distance-medium: 30px;
    --distance-large: 50px;
    --blur-small: 2px;
    --blur-medium: 3px;
    --brand: #c26a3d;
    --brand-bright: #d97b4a;
    --brand-soft: #f3e0d2;
    --bg: #f7f3ec;
    --bg-card: #fffdf8;
    --bg-elevated: #ffffff;
    --bg-soft: #f3ede2;
    --bg-banner: #f0e6d6;
    --bg-formula: #faf5ec;
    --bg-track: #ece5d8;
    --ink: #3d3429;
    --ink-strong: #2a2318;
    --ink-muted: #9a9387;
    --ink-warm: #7a5c3a;
    --ink-faint: #b5a992;
    --line: #f5f0e6;
    --line-strong: #e0d5c5;
    --shadow-card: 0 1px 2px rgba(61, 52, 41, 0.08), 0 5px 12px rgba(61, 52, 41, 0.14), 0 12px 24px rgba(61, 52, 41, 0.14), 0 22px 48px rgba(61, 52, 41, 0.10);
    --shadow-brand: 0 2px 5px rgba(194, 106, 61, 0.36), 0 7px 18px rgba(194, 106, 61, 0.22), 0 14px 32px rgba(194, 106, 61, 0.14);
    --shadow-raised: 0 2px 6px rgba(61, 52, 41, 0.06);
    --shadow-overlay: 0 8px 24px rgba(61, 52, 41, 0.16);
    --material-blur: saturate(180%) blur(20px);
    --material-bg: rgba(255, 253, 248, 0.72);
    --material-border: rgba(255, 255, 255, 0.5);
}

/* ── 暗色主题（深蓝夜色） ── */
:root.dark {
    --brand: #f59a5b;
    --brand-bright: #ffb27a;
    --brand-soft: #2b1f3a;
    --bg: #0d1526;
    --bg-card: #16213a;
    --bg-elevated: #1b2945;
    --bg-soft: #1f2e4a;
    --bg-banner: #1b2945;
    --bg-formula: #16213a;
    --bg-track: #243556;
    --ink: #dbe4f3;
    --ink-strong: #f4f7fd;
    --ink-muted: #7e90b0;
    --ink-warm: #b9c8e2;
    --ink-faint: #546588;
    --line: #24314c;
    --line-strong: #33436a;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 5px 12px rgba(0, 0, 0, 0.40), 0 12px 24px rgba(0, 0, 0, 0.38), 0 22px 48px rgba(0, 0, 0, 0.28);
    --shadow-brand: 0 2px 5px rgba(245, 154, 91, 0.36), 0 7px 18px rgba(245, 154, 91, 0.26), 0 14px 32px rgba(245, 154, 91, 0.18);
    --shadow-raised: 0 2px 7px rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.6);
    --material-blur: saturate(180%) blur(20px);
    --material-bg: rgba(22, 33, 58, 0.72);
    --material-border: rgba(126, 144, 176, 0.24);
}

/* 暗色呼吸微光背景 */
:root.dark .app-bg,
:root.dark body {
    background-image: radial-gradient(120% 60% at 50% -10%, rgba(58, 96, 170, 0.28) 0%, rgba(58, 96, 170, 0) 60%), radial-gradient(100% 50% at 50% 110%, rgba(20, 40, 80, 0.5) 0%, rgba(20, 40, 80, 0) 70%);
    background-attachment: fixed;
}