/* ============================================================
   菇小二 · 设计令牌 (Design Tokens)
   Barbie Dashboard 风格 · 宝塔绿 #20A53A 品牌主色
   所有变量以 --gx- 前缀命名，避免与现有 tailwind-compat 冲突
   字体: Google-style system stack + PingFang SC / Microsoft YaHei 中文支持
   ============================================================ */

:root {
  /* ============================================================
     1. 品牌主色（Primary · 宝塔绿）
     ============================================================ */
  --gx-primary: #20A53A;
  --gx-primary-dark: #178A2E;
  --gx-primary-light: #4DBF62;
  --gx-primary-bg-faint: rgba(32, 165, 58, 0.08);   /* 图标浅背景 10% */
  --gx-primary-bg-light: rgba(32, 165, 58, 0.12);   /* 选中态背景 */
  --gx-primary-bg-soft: rgba(32, 165, 58, 0.20);    /* 悬停背景 */
  --gx-primary-border-light: rgba(32, 165, 58, 0.25);
  --gx-gradient-primary: linear-gradient(135deg, #20A53A 0%, #178A2E 100%);
  --gx-gradient-primary-soft: linear-gradient(135deg, rgba(32,165,58,0.30) 0%, rgba(32,165,58,0.08) 100%);

  /* ============================================================
     2. 辅助色（Secondary）
     ============================================================ */
  --gx-secondary: #4DBF62;
  --gx-secondary-light: #A5D6A7;
  --gx-gradient-success: linear-gradient(135deg, #4DBF62 0%, #34C759 100%);

  /* ============================================================
     3. 强调色（Tertiary · 橙色）
     ============================================================ */
  --gx-tertiary: #FF8800;
  --gx-tertiary-light: #FFE0B2;
  --gx-tertiary-bg-faint: rgba(255, 136, 0, 0.10);
  --gx-tertiary-bg-soft: rgba(255, 136, 0, 0.20);
  --gx-gradient-warning: linear-gradient(135deg, #FF8800 0%, #E65100 100%);

  /* ============================================================
     4. 功能语义色
     ============================================================ */
  --gx-success: #34C759;
  --gx-success-bg: rgba(52, 199, 89, 0.10);
  --gx-success-text: #178A2E;

  --gx-error: #FF3B30;
  --gx-error-bg: rgba(255, 59, 48, 0.10);
  --gx-error-text: #D32F2F;
  --gx-error-border: #EF9A9A;

  --gx-warning: #FF8800;
  --gx-warning-bg: rgba(255, 136, 0, 0.10);
  --gx-warning-text: #E65100;

  --gx-info: #1565C0;
  --gx-info-bg: rgba(21, 101, 192, 0.10);

  --gx-danger: #FF3B30;
  --gx-gradient-danger: linear-gradient(135deg, #FF3B30 0%, #C62828 100%);

  /* ============================================================
     4b. 装饰辅助色（Decorative Accents · 用于头像/图标渐变）
     ============================================================ */
  --gx-accent-purple: #8B5CF6;
  --gx-accent-purple-dark: #7C3AED;
  --gx-accent-purple-light: rgba(139, 92, 246, 0.10);
  --gx-accent-blue: #3B82F6;
  --gx-accent-blue-dark: #2563EB;
  --gx-accent-blue-light: rgba(59, 130, 246, 0.10);
  --gx-accent-amber: #F59E0B;
  --gx-accent-amber-dark: #D97706;
  --gx-accent-amber-light: rgba(245, 158, 11, 0.10);
  --gx-accent-teal: #14B8A6;
  --gx-accent-teal-light: rgba(20, 184, 166, 0.10);
  --gx-accent-pink: #EC4899;
  --gx-accent-pink-light: rgba(236, 72, 153, 0.10);
  --gx-gradient-accent-purple: linear-gradient(135deg, #8B5CF6, #7C3AED);
  --gx-gradient-accent-blue: linear-gradient(135deg, #3B82F6, #2563EB);
  --gx-gradient-accent-amber: linear-gradient(135deg, #F59E0B, #D97706);
  --gx-gradient-accent-teal: linear-gradient(135deg, #14B8A6, #0D9488);

  /* ============================================================
     5. 背景色（Background · Barbie Dashboard Surface）
     ============================================================ */
  --gx-bg-page: #F4F6F3;        /* PageBg 页面背景 · 绿调浅灰 */
  --gx-bg-card: #FFFFFF;         /* CardSurface 卡片背景 · 纯白 */
  --gx-bg-card-warm: #FAFCF8;   /* 暖白卡片 · 绿调 */
  --gx-bg-moss: #EEF5E9;        /* 苔绿浅底 · 首页特色区 */
  --gx-bg-earth: #F6F2EB;       /* 大地浅底 · 首页暖色区 */
  --gx-bg-overlay: rgba(0, 0, 0, 0.45);  /* 侧边栏遮罩 */
  --gx-bg-hover: rgba(0, 0, 0, 0.04);   /* Material hover overlay */
  --gx-bg-active: rgba(0, 0, 0, 0.08);  /* Material pressed state */

  /* ============================================================
     6. 文字色（Text · Google Material OnSurface）
     ============================================================ */
  --gx-text-primary: #1D2129;    /* OnSurface 主文字 · 87% opacity equiv */
  --gx-text-secondary: #6D6D6D;  /* TextSecondary 次要 */
  --gx-text-placeholder: #8E8E93;/* TextPlaceholder 占位 */
  --gx-text-tertiary: #8A8F98;   /* TextTertiary 辅助 */
  --gx-text-disabled: #BDBDBD;
  --gx-text-on-primary: #FFFFFF; /* OnPrimary 白色反白 */
  --gx-text-on-dark: #1D2129;
  --gx-text-muted: #999999;
  --gx-text-dark: #1A1A1A;
  --gx-text-price: #FF3B30;      /* 价格红 */

  /* ============================================================
     7. 边框与分割线（Border / Divider · Google Outline）
     ============================================================ */
  --gx-border: #E5E5E5;          /* BorderColor 精确边框 */
  --gx-border-light: #F0F0F0;    /* BorderLight 浅边框 */
  --gx-border-disabled: #DDDDDD; /* 禁用态边框 */
  --gx-divider: #EEEEEE;         /* SubtleBg 分割线 */
  --gx-border-input-active: rgba(32, 165, 58, 0.60);
  --gx-border-unselected: #E0DDD8;

  /* ============================================================
     8. 导航栏（Navigation）
     ============================================================ */
  --gx-nav-bg: #FFFFFF;          /* NavBackground 白底 */
  --gx-nav-selected: #20A53A;    /* NavSelected 选中绿 */
  --gx-nav-unselected: #999999;  /* NavUnselected 未选灰 */
  --gx-sidebar-bg: var(--gx-gradient-primary);
  --gx-sidebar-text: rgba(255, 255, 255, 0.85);
  --gx-sidebar-text-active: #FFFFFF;
  --gx-sidebar-hover: rgba(255, 255, 255, 0.10);

  /* 移动端底部导航（与品牌绿主题统一） */
  --gx-bottom-tabs-bg: var(--gx-primary);
  --gx-bottom-tabs-shadow: 0 -1px 2px rgba(32, 165, 58, 0.15);
  --gx-bottom-tab-color: rgba(255, 255, 255, 0.95);
  --gx-bottom-tab-active-color: #FFFFFF;
  --gx-bottom-tab-active-bg: rgba(255, 255, 255, 0.16);
  --gx-bottom-fab-bg: #FFFFFF;
  --gx-bottom-fab-color: var(--gx-primary);

  /* ============================================================
     9. 字体族（Fonts · Google-style system stack）
     ============================================================ */
  /* Google recommends Roboto / Google Sans on Android, system stack on web.
     Chinese content requires PingFang SC (macOS/iOS) or Microsoft YaHei (Windows). */
  --gx-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB',
    'Noto Sans SC', system-ui, sans-serif;
  --gx-font-family-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono',
    'SF Mono', 'Consolas', 'Courier New', monospace;

  /* ============================================================
     10. 字号级（Type Scale · Google Material baseline 14px）
     ============================================================ */
  --gx-text-xs: 0.75rem;      /* 12px */
  --gx-text-sm: 0.8125rem;    /* 13px */
  --gx-text-base: 0.875rem;   /* 14px 基准 */
  --gx-text-md: 1rem;         /* 16px */
  --gx-text-lg: 1.125rem;     /* 18px */
  --gx-text-xl: 1.25rem;      /* 20px */
  --gx-text-2xl: 1.5rem;      /* 24px */
  --gx-text-3xl: 1.875rem;    /* 30px */
  --gx-text-stat: 2rem;       /* 32px 统计数字 */
  --gx-text-display: 2.5rem;  /* 40px 大标题 */

  /* ============================================================
     11. 字重（Font Weight）
     ============================================================ */
  --gx-font-normal: 400;
  --gx-font-medium: 500;
  --gx-font-semibold: 600;
  --gx-font-bold: 700;

  /* ============================================================
     12. 行高（Line Height）
     ============================================================ */
  --gx-leading-tight: 1.25;
  --gx-leading-normal: 1.5;
  --gx-leading-relaxed: 1.75;

  /* ============================================================
     13. 间距（Spacing · 4pt baseline grid）
     ============================================================ */
  --gx-space-1: 4px;
  --gx-space-2: 8px;
  --gx-space-3: 12px;
  --gx-space-4: 16px;
  --gx-space-5: 20px;
  --gx-space-6: 24px;
  --gx-space-7: 28px;
  --gx-space-8: 32px;
  --gx-space-10: 40px;
  --gx-space-12: 48px;
  --gx-space-16: 64px;

  /* ============================================================
     14. 圆角（Border Radius · Barbie Dashboard · 紧凑圆润）
     ============================================================ */
  --gx-radius-xs: 4px;
  --gx-radius-sm: 6px;
  --gx-radius-button: 6px;
  --gx-radius-md: 6px;
  --gx-radius-card: 8px;
  --gx-radius-lg: 8px;
  --gx-radius-xl: 12px;
  --gx-radius-pill: 9999px;
  --gx-radius-2xl: 16px;
  --gx-radius-full: 20px;

  /* ============================================================
     15. 阴影（Elevation · Barbie Dashboard · 品牌色渲染阴影）
     ============================================================ */
  /* Barbie design philosophy: shadows carry the brand color (hsl(137, 67%, 39%) = #20A53A),
     creating a cohesive, warm-tinted depth system. Uses 0 5.5px 12.5px geometry adapted. */
  --gx-shadow-sm: 0 1px 3px rgba(32, 165, 58, 0.04), 0 1px 2px rgba(32, 165, 58, 0.04);
  --gx-shadow-md: 0 3px 8px rgba(32, 165, 58, 0.06), 0 1px 2px rgba(32, 165, 58, 0.04);
  --gx-shadow-lg: 0 5px 12px rgba(32, 165, 58, 0.08), 0 2px 4px rgba(32, 165, 58, 0.04);
  --gx-shadow-xl: 0 8px 16px rgba(32, 165, 58, 0.10), 0 4px 6px rgba(32, 165, 58, 0.04);
  --gx-shadow-card: 0 1px 3px rgba(32, 165, 58, 0.04);
  --gx-shadow-card-hover: 0 5px 12px rgba(32, 165, 58, 0.10), 0 1px 3px rgba(32, 165, 58, 0.06);
  --gx-shadow-topbar: 0 1px 0 rgba(32, 165, 58, 0.06);
  --gx-shadow-fab: 0 4px 12px rgba(32, 165, 58, 0.30);
  --gx-shadow-primary: 0 3px 8px rgba(32, 165, 58, 0.20);

  /* ============================================================
     16. 层级（Z-Index）
     ============================================================ */
  --gx-z-base: 1;
  --gx-z-dropdown: 100;
  --gx-z-sticky: 200;
  --gx-z-topbar: 300;
  --gx-z-overlay: 999;
  --gx-z-sidebar: 1000;
  --gx-z-fab: 1050;
  --gx-z-modal: 1060;
  --gx-z-toast: 1070;

  /* ============================================================
     17. 布局尺寸
     ============================================================ */
  --gx-sidebar-width: 260px;
  --gx-topbar-height: 64px;
  --gx-bottom-tab-height: 64px;
  --gx-content-max-width: 1400px;
  --gx-touch-target: 44px;

  /* ============================================================
     18. 过渡与缓动（Transition · Google Material Motion）
     ============================================================ */
  --gx-transition-fast: 150ms ease;            /* Standard / Short */
  --gx-transition-base: 200ms ease;            /* Standard */
  --gx-transition-slow: 300ms ease;            /* Standard / Long */
  --gx-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);   /* Material standard easing */
  --gx-ease-out: cubic-bezier(0.0, 0, 0.2, 1);     /* Material decelerate */

  /* ============================================================
     19. 图表调色板（Chart Palette · 绿色为主）
     ============================================================ */
  --gx-chart-1: #20A53A;   /* 主色绿 */
  --gx-chart-2: #4DBF62;   /* 浅绿 */
  --gx-chart-3: #FF8800;   /* 橙 */
  --gx-chart-4: #34C759;   /* 成功绿 */
  --gx-chart-5: #FF3B30;   /* 红 */
  --gx-chart-6: #1565C0;   /* 蓝 */
  --gx-chart-7: #9C27B0;   /* 紫 */
  --gx-chart-8: #009688;   /* 青 */
  --gx-chart-grid: #EEEEEE;
  --gx-chart-text: #6D6D6D;

  /* ============================================================
     20. 暗色模式令牌（Dark Mode · Google Material dark baseline）
     ============================================================ */
  /* Material dark surfaces use #121212 base, tonal elevation via slight lightening,
     not shadow opacity. This avoids the "glowing edges" of transparency shadows. */
  --gx-dark-bg-page: #121212;
  --gx-dark-bg-card: #1E1E1E;
  --gx-dark-bg-card-elevated: #2C2C2C;
  --gx-dark-bg-moss: #111A14;
  --gx-dark-bg-earth: #1A1710;
  --gx-dark-bg-hover: rgba(255, 255, 255, 0.06);
  --gx-dark-bg-active: rgba(255, 255, 255, 0.08);
  --gx-dark-bg-overlay: rgba(0, 0, 0, 0.60);
  --gx-dark-text-primary: #E8EAED;
  --gx-dark-text-secondary: #9AA0A6;
  --gx-dark-text-placeholder: #6E7278;
  --gx-dark-text-tertiary: #5F6368;
  --gx-dark-border: #3C4043;
  --gx-dark-border-light: #2D2D2D;
  --gx-dark-divider: #3C4043;
  /* Dark mode shadows: still subtle, matching Material dark elevation.
     Dark themes should rely on tonal contrast, but shadows still help
     distinguish overlapping surfaces. */
  --gx-dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
  --gx-dark-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
  --gx-dark-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.12);
  --gx-dark-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.10);
  --gx-dark-shadow-card-hover: 0 1px 3px rgba(0, 0, 0, 0.16);
  --gx-dark-nav-bg: #1E1E1E;
  --gx-dark-primary-bg-faint: rgba(32, 165, 58, 0.12);
  --gx-dark-primary-bg-light: rgba(32, 165, 58, 0.18);
  --gx-dark-sidebar-text: rgba(255, 255, 255, 0.75);
  --gx-dark-success-bg: rgba(52, 199, 89, 0.15);
  --gx-dark-error-bg: rgba(255, 59, 48, 0.15);
  --gx-dark-warning-bg: rgba(255, 136, 0, 0.15);
  --gx-dark-info-bg: rgba(21, 101, 192, 0.15);
}

/* ============================================================
   暗色模式自动适配（尊重系统偏好）
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gx-bg-page: var(--gx-dark-bg-page);
    --gx-bg-card: var(--gx-dark-bg-card);
    --gx-bg-card-warm: var(--gx-dark-bg-card-elevated);
    --gx-bg-moss: var(--gx-dark-bg-moss);
    --gx-bg-earth: var(--gx-dark-bg-earth);
    --gx-bg-hover: var(--gx-dark-bg-hover);
    --gx-bg-active: var(--gx-dark-bg-active);
    --gx-bg-overlay: var(--gx-dark-bg-overlay);
    --gx-text-primary: var(--gx-dark-text-primary);
    --gx-text-secondary: var(--gx-dark-text-secondary);
    --gx-text-placeholder: var(--gx-dark-text-placeholder);
    --gx-text-tertiary: var(--gx-dark-text-tertiary);
    --gx-text-muted: var(--gx-dark-text-tertiary);
    --gx-text-dark: var(--gx-dark-text-primary);
    --gx-text-on-dark: var(--gx-dark-text-primary);
    --gx-border: var(--gx-dark-border);
    --gx-border-light: var(--gx-dark-border-light);
    --gx-border-disabled: var(--gx-dark-border);
    --gx-divider: var(--gx-dark-divider);
    --gx-nav-bg: var(--gx-dark-nav-bg);
    --gx-shadow-sm: var(--gx-dark-shadow-sm);
    --gx-shadow-md: var(--gx-dark-shadow-md);
    --gx-shadow-lg: var(--gx-dark-shadow-lg);
    --gx-shadow-card: var(--gx-dark-shadow-card);
    --gx-shadow-card-hover: var(--gx-dark-shadow-card-hover);
    --gx-shadow-topbar: var(--gx-dark-shadow-sm);
    --gx-primary-bg-faint: var(--gx-dark-primary-bg-faint);
    --gx-primary-bg-light: var(--gx-dark-primary-bg-light);
    --gx-sidebar-text: var(--gx-dark-sidebar-text);
    --gx-success-bg: var(--gx-dark-success-bg);
    --gx-error-bg: var(--gx-dark-error-bg);
    --gx-warning-bg: var(--gx-dark-warning-bg);
    --gx-info-bg: var(--gx-dark-info-bg);
    --gx-chart-grid: var(--gx-dark-border);
    --gx-chart-text: var(--gx-dark-text-secondary);
  }
}

/* 手动强制亮色/暗色 */
[data-theme="dark"] {
  --gx-bg-page: var(--gx-dark-bg-page) !important;
  --gx-bg-card: var(--gx-dark-bg-card) !important;
  --gx-bg-card-warm: var(--gx-dark-bg-card-elevated) !important;
  --gx-bg-moss: var(--gx-dark-bg-moss) !important;
  --gx-bg-earth: var(--gx-dark-bg-earth) !important;
  --gx-bg-hover: var(--gx-dark-bg-hover) !important;
  --gx-bg-active: var(--gx-dark-bg-active) !important;
  --gx-bg-overlay: var(--gx-dark-bg-overlay) !important;
  --gx-text-primary: var(--gx-dark-text-primary) !important;
  --gx-text-secondary: var(--gx-dark-text-secondary) !important;
  --gx-text-placeholder: var(--gx-dark-text-placeholder) !important;
  --gx-text-tertiary: var(--gx-dark-text-tertiary) !important;
  --gx-text-muted: var(--gx-dark-text-tertiary) !important;
  --gx-text-dark: var(--gx-dark-text-primary) !important;
  --gx-text-on-dark: var(--gx-dark-text-primary) !important;
  --gx-border: var(--gx-dark-border) !important;
  --gx-border-light: var(--gx-dark-border-light) !important;
  --gx-border-disabled: var(--gx-dark-border) !important;
  --gx-divider: var(--gx-dark-divider) !important;
  --gx-nav-bg: var(--gx-dark-nav-bg) !important;
  --gx-shadow-sm: var(--gx-dark-shadow-sm) !important;
  --gx-shadow-md: var(--gx-dark-shadow-md) !important;
  --gx-shadow-lg: var(--gx-dark-shadow-lg) !important;
  --gx-shadow-card: var(--gx-dark-shadow-card) !important;
  --gx-shadow-card-hover: var(--gx-dark-shadow-card-hover) !important;
  --gx-shadow-topbar: var(--gx-dark-shadow-sm) !important;
  --gx-primary-bg-faint: var(--gx-dark-primary-bg-faint) !important;
  --gx-primary-bg-light: var(--gx-dark-primary-bg-light) !important;
  --gx-sidebar-text: var(--gx-dark-sidebar-text) !important;
  --gx-success-bg: var(--gx-dark-success-bg) !important;
  --gx-error-bg: var(--gx-dark-error-bg) !important;
  --gx-warning-bg: var(--gx-dark-warning-bg) !important;
  --gx-info-bg: var(--gx-dark-info-bg) !important;
  --gx-chart-grid: var(--gx-dark-border) !important;
  --gx-chart-text: var(--gx-dark-text-secondary) !important;
}

[data-theme="light"] {
  /* 确保手动亮色模式下恢复默认 */
}