/* =====================================================================
   OOPbuy Spreadsheet — Design Tokens (v3.0 — refined)
   -------------------------------------------------------------------
   方向：保留 OOPbuy 粉调主导，整体收紧版式：圆角更小、阴影更弱、
   边框更细、间距更紧、字号 hierarchy 更清晰。三套主题：浅 / 暗 / 跟随系统。
   ===================================================================== */

/* ---------------- 共享结构 tokens ---------------- */
:root {
    /* 圆角（v3.0 收紧：原 6/10/14/20/28 → 现 4/6/8/12/16） */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* 间距 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* 字号 */
    --fs-xs: 0.75rem;       /* 12 */
    --fs-sm: 0.8125rem;     /* 13 */
    --fs-base: 0.9375rem;   /* 15 — 收紧基础字号 */
    --fs-md: 1.0625rem;     /* 17 */
    --fs-lg: 1.25rem;       /* 20 */
    --fs-xl: 1.5rem;        /* 24 */
    --fs-2xl: 1.875rem;     /* 30 */
    --fs-3xl: 2.25rem;      /* 36 */
    --fs-4xl: 3rem;         /* 48 */
    --fs-5xl: 3.75rem;      /* 60 */

    /* 字重 */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* 字体栈（v4.0：正文 Nunito Sans，标题 Rubik，均带系统兜底） */
    --font-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                 "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --font-display: "Rubik", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* 过渡 */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 300ms;

    /* 布局 */
    --container-width: 1200px;
    --container-narrow: 760px;
    --container-wide: 1440px;
    --header-height: 64px;          /* 收紧 72→64 */

    /* z-index */
    --z-header: 1001;
    --z-dropdown: 1050;
    --z-modal: 1200;
    --z-toast: 1400;
    --z-tooltip: 1500;

    /* 阴影（v3.0 减弱：去掉柔和大阴影） */
    --shadow-xs: 0 1px 2px rgba(15, 15, 25, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 15, 25, 0.06), 0 1px 2px rgba(15, 15, 25, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 15, 25, 0.06);
    --shadow-lg: 0 8px 24px rgba(15, 15, 25, 0.08);
    --shadow-accent: 0 4px 12px rgba(255, 30, 86, 0.18);

    /* 焦点环 */
    --focus-ring: 0 0 0 3px rgba(255, 30, 86, 0.22);
}

/* ---------------- 浅色主题（默认） ---------------- */
:root,
:root[data-theme="light"] {
    --bg: #ffffff;
    --bg-soft: #fafafb;             /* 比原 #fff5f7 更中性，让粉色集中在 CTA */
    --bg-tint: #fff8fa;             /* 仅 hero 用的极淡粉 */
    --surface: #ffffff;
    --surface-2: #f7f7f9;
    --surface-hover: #f2f2f5;
    --border: rgba(15, 15, 25, 0.08);
    --border-strong: rgba(15, 15, 25, 0.14);
    --divider: rgba(15, 15, 25, 0.06);
    --text: #1a1a22;
    --text-strong: #08080f;
    --text-weak: #5a5a68;
    --text-muted: #8a8a98;

    --accent: #ff1e56;
    --accent-hover: #e60d44;
    --accent-weak: rgba(255, 30, 86, 0.08);
    --accent-soft: rgba(255, 30, 86, 0.04);
    --accent-on: #ffffff;

    --accent-alt: #ffd700;
    --accent-alt-hover: #e6c200;
    --accent-alt-on: #1a1a1a;

    --info: #0b7ac8;
    --danger: #d23a4d;
    --success: #0e9f52;
    --warning: #ffb547;

    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(15, 15, 25, 0.06);

    --bg-gradient: #ffffff;
    --hero-gradient: linear-gradient(180deg, #fff8fa 0%, #ffffff 100%);

    color-scheme: light;
}

/* ---------------- 暗色主题 ---------------- */
:root[data-theme="dark"] {
    --bg: #0c0c12;
    --bg-soft: #14141c;
    --bg-tint: #16121a;
    --surface: #16161f;
    --surface-2: #1c1c26;
    --surface-hover: #22222e;
    --border: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.14);
    --divider: rgba(255, 255, 255, 0.05);
    --text: #ececf0;
    --text-strong: #ffffff;
    --text-weak: #a8a8b8;
    --text-muted: #6a6a78;

    --accent: #ff3d70;
    --accent-hover: #ff5584;
    --accent-weak: rgba(255, 61, 112, 0.14);
    --accent-soft: rgba(255, 61, 112, 0.06);
    --accent-on: #ffffff;

    --accent-alt: #ffd700;
    --accent-alt-hover: #e6c200;
    --accent-alt-on: #0c0c12;

    --info: #53bdeb;
    --danger: #f15c6d;
    --success: #25d366;
    --warning: #ffb547;

    --glass-bg: rgba(20, 20, 28, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);

    --bg-gradient: #0c0c12;
    --hero-gradient: linear-gradient(180deg, #16121a 0%, #0c0c12 100%);

    color-scheme: dark;
}

/* ---------------- 跟随系统（未手动切换时的暗色回退） ---------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #0c0c12;
        --bg-soft: #14141c;
        --bg-tint: #16121a;
        --surface: #16161f;
        --surface-2: #1c1c26;
        --surface-hover: #22222e;
        --border: rgba(255, 255, 255, 0.06);
        --border-strong: rgba(255, 255, 255, 0.14);
        --divider: rgba(255, 255, 255, 0.05);
        --text: #ececf0;
        --text-strong: #ffffff;
        --text-weak: #a8a8b8;
        --text-muted: #6a6a78;
        --accent: #ff3d70;
        --accent-hover: #ff5584;
        --accent-weak: rgba(255, 61, 112, 0.14);
        --accent-soft: rgba(255, 61, 112, 0.06);
        --accent-on: #ffffff;
        --glass-bg: rgba(20, 20, 28, 0.85);
        --glass-border: rgba(255, 255, 255, 0.08);
        --bg-gradient: #0c0c12;
        --hero-gradient: linear-gradient(180deg, #16121a 0%, #0c0c12 100%);
        color-scheme: dark;
    }
}