/* ============================================================
 * LifePilot Design Tokens v3.0
 * 统一设计语言 — 所有子系统共享
 * 配色升级：米黄暖底 + 墨绿现代强调色 + 暖调层次阴影
 *
 * 使用方式：
 *   <link rel="stylesheet" href="/design-tokens.css">
 *
 * 支持暗色主题：
 *   <html data-theme="dark">
 * ============================================================ */

:root {
    /* ========================================
     * 1. 品牌色（墨绿 · Pine）
     * ======================================== */
    --color-primary: #0F766E;
    --color-primary-hover: #0D655D;
    --color-primary-active: #0B574F;
    --color-primary-light: #14B8A6;
    --color-primary-bg: #E6F4F1;          /* 图标/高亮底：柔和墨绿 */
    --color-primary-soft: rgba(15, 118, 110, 0.12);
    --color-primary-gradient: linear-gradient(135deg, #0F766E 0%, #0E9488 50%, #14B8A6 100%);

    /* 次要强调色（暖珊瑚 · 用于激活态/点缀，避免配色单一） */
    --color-accent: #E07856;
    --color-accent-bg: #FBEDE6;
    --color-accent-gradient: linear-gradient(135deg, #E07856 0%, #D9654A 100%);

    /* ========================================
     * 2. 语义色（现代 SaaS 色板）
     * ======================================== */
    /* 成功 · 翡翠 */
    --color-success: #10b981;
    --color-success-hover: #0ea371;
    --color-success-bg: #e7f7f0;
    --color-success-border: #a7f3d0;

    /* 危险 · 玫瑰 */
    --color-danger: #f43f5e;
    --color-danger-hover: #e11d48;
    --color-danger-bg: #fdeaee;
    --color-danger-border: #fecdd3;

    /* 警告 · 琥珀 */
    --color-warning: #d97706;
    --color-warning-hover: #b45309;
    --color-warning-bg: #fdf3e3;
    --color-warning-border: #fde0a8;

    /* 信息 · 天蓝 */
    --color-info: #2563eb;
    --color-info-hover: #1d4ed8;
    --color-info-bg: #e9f0fd;
    --color-info-border: #bfdbfe;

    /* ========================================
     * 3. 中性色（亮色主题 · 暖米调）
     * ======================================== */
    --color-bg: linear-gradient(135deg, #FAF6EE 0%, #F5EFE3 55%, #FBF3E9 100%);
    --color-bg-secondary: #F1EADC;
    --color-surface: #FFFBF5;             /* 暖白卡片，比纯白柔 */
    --color-surface-hover: #FBF6EC;
    --color-surface-active: #F3ECDD;

    --color-text-primary: #2B2620;        /* 暖墨棕，比冷灰更协调 */
    --color-text-secondary: #6F665A;
    --color-text-tertiary: #A0968600;     /* 占位，下方覆盖 */
    --color-text-tertiary: #9C9284;
    --color-text-inverse: #ffffff;
    --color-text-link: #0F766E;

    --color-border: #EBE3D4;              /* 暖米灰描边 */
    --color-border-light: #F3ECDD;
    --color-border-focus: #0F766E;
    --color-divider: #F0E9DB;

    /* ========================================
     * 4. 第三方品牌色
     * ======================================== */
    --color-wechat: #07c160;
    --color-wechat-bg: #e8f5e9;

    /* ========================================
     * 5. 间距（4px 基准）
     * ======================================== */
    --space-0: 0;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;

    /* ========================================
     * 6. 字体
     * ======================================== */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        'PingFang SC', 'Hiragino Sans GB',
                        'Microsoft YaHei', sans-serif;
    --font-family-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 28px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* ========================================
     * 7. 圆角
     * ======================================== */
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    --radius-pill: 9999px;

    /* ========================================
     * 8. 阴影（暖调层次 — 不再是冷紫）
     * ======================================== */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(80, 60, 30, 0.05);
    --shadow-sm: 0 1px 5px rgba(80, 60, 30, 0.07);
    --shadow-md: 0 4px 16px rgba(80, 60, 30, 0.09);
    --shadow-lg: 0 10px 30px rgba(80, 60, 30, 0.13);
    --shadow-xl: 0 16px 44px rgba(80, 60, 30, 0.16);
    --shadow-button: 0 6px 18px rgba(15, 118, 110, 0.30);
    --shadow-fab: 0 8px 22px rgba(15, 118, 110, 0.40);

    /* ========================================
     * 9. 过渡
     * ======================================== */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ========================================
     * 10. Z-Index 层级
     * ======================================== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-toast: 999;
    --z-overlay: 1000;

    /* ========================================
     * 11. 布局
     * ======================================== */
    --header-height: 60px;
    --container-max: 1200px;
    --container-narrow: 800px;

    /* ========================================
     * 12. 边框
     * ======================================== */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-width-active: 3px;
}

/* ============================================================
 * 暗色主题（暖夜墨绿 · 与米黄主色统一）
 * 启用方式：<html data-theme="dark">
 * ============================================================ */
[data-theme="dark"] {
    --color-bg: linear-gradient(135deg, #1b1914 0%, #221f18 55%, #16201c 100%);
    --color-bg-secondary: #23201a;
    --color-surface: #26231c;             /* 暖深棕卡片 */
    --color-surface-hover: #2e2a21;
    --color-surface-active: #221f18;

    --color-text-primary: #F3EDE3;
    --color-text-secondary: #B6AC9C;
    --color-text-tertiary: #847B6C;
    --color-text-link: #2DD4BF;

    --color-border: #3a352b;
    --color-border-light: #2c2820;
    --color-divider: #322d24;

    --color-primary: #2DD4BF;
    --color-primary-hover: #23bca9;
    --color-primary-active: #1ba495;
    --color-primary-light: #5EEAD4;
    --color-primary-bg: rgba(45, 212, 191, 0.16);
    --color-primary-soft: rgba(45, 212, 191, 0.18);
    --color-primary-gradient: linear-gradient(135deg, #14B8A6 0%, #2DD4BF 60%, #5EEAD4 100%);
    /* 暗色下主按钮渐变为亮青绿，反色文字需改深色以保证对比度（WCAG AA） */
    --color-text-inverse: #07211d;

    --color-accent: #F0906E;
    --color-accent-bg: rgba(240, 144, 110, 0.16);

    --color-success-bg: rgba(16, 185, 129, 0.15);
    --color-danger-bg: rgba(244, 63, 94, 0.15);
    --color-warning-bg: rgba(217, 119, 6, 0.18);
    --color-info-bg: rgba(37, 99, 235, 0.15);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 1px 5px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 44px rgba(0, 0, 0, 0.7);
}

/* ============================================================
 * 全局 Reset（可选，各系统按需引用）
 * 如果各系统已有自己的 reset，可跳过此段
 * ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    background: var(--color-bg);
    color: var(--color-text-primary);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}