/* ============================================================
   LongWoo Studio - Shared Theme Stylesheet
   合并自各 HTML 文件中重复的内联 <style> 块：
   1. theme-vars          - CSS 设计系统变量定义
   2. semantic-token-fallback - Tailwind 语义类映射
   3. no-scrollbar         - 隐藏滚动条工具类
   ============================================================ */

/* ===== 1. Theme Variables ===== */
/* LongWoo Studio Design System */
:root {
  /* Colors */
  --color-background: #FFFFFF;
  --color-surface: #F3F3F3;
  --color-primary: #101010;
  --color-primary-light: rgba(16, 16, 16, 0.6);
  --color-primary-lighter: rgba(16, 16, 16, 0.3);
  --color-primary-lightest: rgba(16, 16, 16, 0.1);
  --color-primary-lightest2: rgba(16, 16, 16, 0.05);
  --color-border: rgba(16, 16, 16, 0.1);
  --color-border-light: rgba(16, 16, 16, 0.05);
  --color-success: #22C55E;
  --color-error: #EF4444;
  --color-warning: #F59E0B;
  --color-info: #3B82F6;

  /* Semantic Brand Variables (required by fill-html-head.mjs, prefix: longwoo) */
  --longwoo-background: #FFFFFF;
  --longwoo-foreground: #101010;
  --longwoo-primary: #101010;
  --longwoo-card: #FFFFFF;
  --longwoo-muted: #F3F3F3;
  --longwoo-border: rgba(16, 16, 16, 0.1);
  --longwoo-accent: #101010;

  /* Semantic State Variables */
  --state-success: #22C55E;
  --state-error: #EF4444;
  --state-warning: #F59E0B;
  --state-info: #3B82F6;

  /* Typography */
  --font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-hero: 48px;
  --line-height: 1.5;
  --line-height-tight: 1.2;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Radius Aliases (required by fill-html-head.mjs, prefix: longwoo) */
  --longwoo-radius-sm: 8px;
  --longwoo-radius-md: 12px;
  --longwoo-radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.05);

  /* Layout */
  --nav-height: 56px;
  --bottom-nav-height: 64px;
  --content-max-width: 480px;
}

/* ===== 2. Semantic Token Fallback (Tailwind) ===== */
.bg-background { background-color: var(--longwoo-background); }
.text-background { color: var(--longwoo-background); }
.border-background { border-color: var(--longwoo-background); }
.ring-background { --tw-ring-color: var(--longwoo-background); }
.bg-foreground { background-color: var(--longwoo-foreground); }
.text-foreground { color: var(--longwoo-foreground); }
.border-foreground { border-color: var(--longwoo-foreground); }
.ring-foreground { --tw-ring-color: var(--longwoo-foreground); }
.bg-card { background-color: var(--longwoo-card); }
.text-card { color: var(--longwoo-card); }
.border-card { border-color: var(--longwoo-card); }
.ring-card { --tw-ring-color: var(--longwoo-card); }
.bg-primary { background-color: var(--longwoo-primary); }
.text-primary { color: var(--longwoo-primary); }
.border-primary { border-color: var(--longwoo-primary); }
.ring-primary { --tw-ring-color: var(--longwoo-primary); }
.bg-muted { background-color: var(--longwoo-muted); }
.text-muted { color: var(--longwoo-muted); }
.border-muted { border-color: var(--longwoo-muted); }
.ring-muted { --tw-ring-color: var(--longwoo-muted); }
.bg-accent { background-color: var(--longwoo-accent); }
.text-accent { color: var(--longwoo-accent); }
.border-accent { border-color: var(--longwoo-accent); }
.ring-accent { --tw-ring-color: var(--longwoo-accent); }
.bg-border { background-color: var(--longwoo-border); }
.text-border { color: var(--longwoo-border); }
.border-border { border-color: var(--longwoo-border); }
.ring-border { --tw-ring-color: var(--longwoo-border); }

/* ===== 3. Utility: Hide Scrollbar ===== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== 4. 公共底部导航栏（从 index/ai-chat/preorder-step1 中抽取） ===== */
/* 以下规则在 index.html、ai-chat.html、preorder-step1.html 中完全重复，统一提取到此处 */

/* 底部导航容器 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--content-max-width);
  height: var(--bottom-nav-height);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border-light);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--space-xs);
  box-sizing: border-box;
}

/* 导航项（兼容 <a> 和 <button> 元素） */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  cursor: pointer;
  padding: var(--space-xs);
  min-width: 60px;
  border: none;
  background: none;
}

/* 导航项图标 */
.nav-item-icon {
  width: 22px;
  height: 22px;
}

.nav-item-icon svg {
  width: 100%;
  height: 100%;
}

/* 导航项文字标签 */
.nav-item-label {
  font-size: var(--font-size-xs);
  color: var(--color-primary-light);
  white-space: nowrap;
  line-height: 1.2;
}

/* 导航项激活状态 */
.nav-item.active .nav-item-label {
  color: var(--color-primary);
  font-weight: 600;
}

.nav-item.active .nav-item-icon svg {
  stroke: var(--color-primary);
}