/*
 * 小蜗牛旅行 - 主题样式
 * 自然绿+暖黄配色方案
 * 
 * 换风格只需替换此文件中的CSS变量即可
 */

:root {
    /* === 主色调 === */
    --color-primary: #10B981;         /* 翡翠绿 - 主色 */
    --color-primary-dark: #059669;    /* 深绿 - hover/active */
    --color-primary-darker: #047857;  /* 更深绿 - 按钮hover */
    --color-primary-light: #D1FAE5;  /* 浅绿 - 背景/标签 */
    --color-primary-lighter: #ECFDF5;/* 极浅绿 - hover背景 */
    
    /* === 强调色 === */
    --color-accent: #F59E0B;          /* 暖黄/琥珀 - 强调 */
    --color-accent-dark: #D97706;     /* 深黄 - hover */
    --color-accent-light: #FEF3C7;   /* 浅黄 - 背景提示 */
    
    /* === 渐变 === */
    --gradient-hero: linear-gradient(135deg, #10B981 0%, #059669 50%, #0D9488 100%);
    --gradient-hero-alt: linear-gradient(135deg, #10B981 0%, #F59E0B 100%);
    --gradient-text: linear-gradient(135deg, #10B981 0%, #0D9488 100%);
    
    /* === 文字 === */
    --color-text-primary: #065F46;    /* 绿色系深色文字 */
    --color-text-link: #10B981;
    --color-text-muted: #6B7280;
    
    /* === 边框/阴影 === */
    --color-border: #D1FAE5;
    --shadow-card: 0 4px 20px rgba(16, 185, 129, 0.08);
    
    /* === 评分星星 === */
    --color-star: #F59E0B;
    
    /* === 底部导航激活 === */
    --color-nav-active: #10B981;
}

/* === Tailwind 类覆盖 === */

/* 主色背景 */
.bg-theme { background-color: var(--color-primary); }
.bg-theme-dark { background-color: var(--color-primary-dark); }
.bg-theme-light { background-color: var(--color-primary-light); }
.bg-theme-lighter { background-color: var(--color-primary-lighter); }
.bg-accent { background-color: var(--color-accent); }
.bg-accent-light { background-color: var(--color-accent-light); }

/* 主色文字 */
.text-theme { color: var(--color-primary); }
.text-theme-dark { color: var(--color-primary-dark); }
.text-theme-muted { color: var(--color-text-primary); }
.text-accent { color: var(--color-accent); }

/* 渐变 */
.bg-hero-gradient { background: var(--gradient-hero); }
.bg-hero-gradient-alt { background: var(--gradient-hero-alt); }
.gradient-text-theme {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 边框 */
.border-theme { border-color: var(--color-primary); }
.border-theme-light { border-color: var(--color-primary-light); }

/* Ring/Focus */
.ring-theme:focus { --tw-ring-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }

/* Hover 状态 */
.hover-bg-theme:hover { background-color: var(--color-primary); }
.hover-bg-theme-dark:hover { background-color: var(--color-primary-dark); }
.hover-bg-theme-light:hover { background-color: var(--color-primary-light); }
.hover-bg-theme-lighter:hover { background-color: var(--color-primary-lighter); }
.hover-text-theme:hover { color: var(--color-primary); }
.hover-text-theme-dark:hover { color: var(--color-primary-dark); }

/* 星星 */
.text-star { color: var(--color-star); }

/* 导航栏 */
.nav-blur {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

/* 卡片 */
.card-shadow { box-shadow: var(--shadow-card); }

/* === 按钮样式 === */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    transition: all 0.2s;
}
.btn-primary:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-accent {
    background-color: var(--color-accent);
    color: white;
    transition: all 0.2s;
}
.btn-accent:hover {
    background-color: var(--color-accent-dark);
}

/* === 标签/徽章 === */
.badge-theme {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}
.badge-accent {
    background-color: var(--color-accent-light);
    color: var(--color-accent-dark);
}

/* === 移动端底部导航 === */
.mobile-nav-active {
    color: var(--color-nav-active);
}

/* === 滚动条美化 === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--color-primary-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }