/* ═══════════════════════════════════════════════════════════
   不容易 H5 · Theme Tokens

   颜色治理分层:
   1. Palette: 原始色板, 不直接在组件中使用
   2. Semantic: 页面/文字/边框/动作/状态
   3. Domain: 六爻、八字、五行、符象等业务颜色
   4. Legacy aliases: 兼容旧 CSS 变量名, 便于逐步迁移

   换肤方式:
   在 html/body 上设置 data-theme="wuxing-light" 或未来新增皮肤名。
   新皮肤只覆盖本文件中的 token, 页面样式不应写死 hex。
   ═══════════════════════════════════════════════════════════ */

:root,
:root[data-theme="wuxing-light"] {
  /* Palette */
  --color-earth-50:  #FBFAF7;
  --color-earth-100: #F5F2EB;
  --color-earth-150: #EFEBE1;
  --color-earth-200: #E6E0D4;
  --color-earth-300: #D4CCBD;
  --color-earth-400: #B8AA98;
  --color-earth-500: #A09888;

  --color-fire-300: #E2B8A0;
  --color-fire-400: #C27A5D;
  --color-fire-500: #B06040;
  --color-fire-600: #8E4530;

  --color-water-900: #141E28;
  --color-water-800: #1A2632;
  --color-water-700: #2A3A48;
  --color-water-600: #445A6E;
  --color-water-500: #5A7A94;
  --color-water-200: #D8E4EE;
  --color-water-100: #EDF3F7;

  --color-wood-500: #6B8A6F;
  --color-wood-400: #8BA78E;
  --color-wood-100: #EAF0EA;

  --color-metal-500: #B89870;
  --color-metal-300: #D9C9B2;
  --color-metal-200: #F0E8DA;
  --color-metal-100: #FBF8F3;

  --color-white: #FFFFFF;

  /* Semantic */
  --surface-page: var(--color-earth-50);
  --surface-card: var(--color-earth-100);
  --surface-input: var(--color-earth-150);
  --surface-hover: var(--color-earth-200);
  --surface-elevated: var(--color-white);
  --surface-overlay: rgba(20, 30, 40, 0.5);
  --surface-overlay-soft: rgba(0, 0, 0, 0.35);

  --text-primary: var(--color-water-800);
  --text-secondary: var(--color-water-600);
  --text-muted: var(--color-earth-500);
  --text-tertiary: #666666;
  --text-inverse: var(--color-earth-50);
  --text-time: var(--color-water-500);
  --text-positive: var(--color-wood-500);

  --border-subtle: var(--color-earth-200);
  --border-accent: var(--color-metal-300);

  --action-primary: var(--color-fire-400);
  --action-hover: var(--color-fire-500);
  --action-active: var(--color-fire-600);
  --action-disabled: var(--color-fire-300);

  --state-danger: #F44336;
  --state-danger-soft: #FFEBEE;
  --state-warning: #FFA500;
  --state-success: var(--color-wood-500);
  --state-info: #2196F3;

  --tone-fire-soft: rgba(194, 122, 93, 0.08);

  --shadow-card-hover: 0 6px 20px rgba(28, 40, 51, 0.06);
  --shadow-dropdown: 0 4px 20px rgba(28, 40, 51, 0.12);
  --shadow-modal: 0 12px 40px rgba(20, 30, 40, 0.2);
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-action: 0 4px 12px rgba(194, 122, 93, 0.3);

  /* Golden ratio system */
  --ratio-phi: 1.618;
  --ratio-phi-inverse: 0.618;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", ui-monospace, monospace;
  --font-display: "Noto Serif SC", "STSong", "Georgia", "Songti SC", serif;

  --text-2xs: 0.625rem;   /* 10px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.625rem;    /* 26px */
  --text-2xl: 2rem;       /* 32px */
  --text-3xl: 2.625rem;   /* 42px */
  --text-4xl: 3.25rem;    /* 52px */

  /* Typography hierarchy */
  --type-page-title: var(--text-2xl);
  --type-section-title: var(--text-lg);
  --type-card-title: var(--text-md);
  --type-body: var(--text-base);
  --type-body-sm: var(--text-sm);
  --type-meta: var(--text-sm);
  --type-caption: var(--text-xs);
  --type-profile-name: var(--text-lg);
  --type-profile-meta: var(--text-sm);
  --type-profile-chip: var(--text-sm);

  --leading-compact: 1;
  --leading-tight: 1.15;
  --leading-title: 1.24;
  --leading-body: 1.618;
  --leading-reading: 1.8;

  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.375rem;   /* 6px */
  --space-sm: 0.625rem;   /* 10px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.625rem;   /* 26px */
  --space-xl: 2.625rem;   /* 42px */
  --space-2xl: 4.25rem;   /* 68px */
  --space-3xl: 6.875rem;  /* 110px */

  --radius-xs: 0.25rem;   /* 4px */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.625rem;  /* 10px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.625rem;  /* 26px */

  --layout-narrow: 26.25rem;   /* 420px */
  --layout-readable: 42.5rem;  /* 680px */
  --layout-wide: 60rem;        /* 960px */
  --layout-max: 77.5rem;       /* 1240px */
  --layout-home-grid: 48.75rem;/* 780px */

  --control-height-sm: 2rem;     /* 32px */
  --control-height: 2.625rem;    /* 42px */
  --control-height-lg: 3.25rem;  /* 52px */
  --control-padding-x: var(--space-lg);
  --control-padding-y: var(--space-sm);
  --icon-size-sm: 2rem;       /* 32px */
  --icon-size-md: 3.25rem;    /* 52px */
  --icon-size-lg: 4.25rem;    /* 68px */
  --icon-size-xl: 5rem;       /* 80px */

  --duration-fast: 180ms;
  --duration-normal: 290ms;
  --duration-slow: 470ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --gua-title: var(--text-2xl);
  --gua-subtitle: var(--text-lg);
  --gua-text: var(--text-md);
  --gua-annotation: var(--text-base);
  --gua-row-height: 2.9375rem;       /* 47px */
  --gua-header-height: 1.75rem;      /* 28px */
  --gua-highlight-height: 1.75rem;   /* 28px */
  --gua-yao-width: 3.4375rem;        /* 55px */
  --gua-yao-height: 1rem;            /* 16px */
  --gua-najia-width: 5em;
  --gua-najia-bian-width: 5.5em;
  --gua-col-gap: 0.75rem;            /* 12px */
  --gua-group-gap: 1.875rem;         /* 30px */

  /* Domain */
  --domain-liuyao: var(--color-fire-400);
  --domain-bazi: var(--color-wood-400);
  --domain-shuzi: var(--color-water-500);

  --info-purpose: var(--color-wood-500);
  --info-time: var(--state-info);
  --info-sun: var(--color-fire-400);
  --info-ganzhi: #9C27B0;
  --info-xunkong: var(--state-danger);

  --hexagram-accent: var(--color-fire-400);
  --hexagram-header: #A49B8D;
  --hexagram-rule: #DDD5C8;
  --hexagram-yang: var(--color-fire-400);
  --hexagram-yin: var(--color-water-500);
  --hexagram-changed-bg: rgba(194, 122, 93, 0.06);
  --hexagram-fushen: #9D9487;
  --hexagram-fushen-fuxiang: #7A1FA2;

  --wuxing-mu: #009E2A;
  --wuxing-huo: #E5391F;
  --wuxing-tu: #9A5A13;
  --wuxing-jin: #D99400;
  --wuxing-shui: #2352D6;

  --auspicious-qinglong: #008C8C;
  --auspicious-baihu: #C0265A;
  --auspicious-zhifu: #7C3AED;

  --brand-wechat: #07C160;
  --brand-alipay: #1677FF;
  --surface-qr-placeholder: #F5F5F5;
  --text-disabled: #BBBBBB;

  /* Legacy aliases */
  --earth-50: var(--color-earth-50);
  --earth-100: var(--color-earth-100);
  --earth-150: var(--color-earth-150);
  --earth-200: var(--color-earth-200);
  --earth-300: var(--color-earth-300);
  --earth-400: var(--color-earth-400);
  --earth-500: var(--color-earth-500);

  --fire-300: var(--color-fire-300);
  --fire-400: var(--color-fire-400);
  --fire-500: var(--color-fire-500);
  --fire-600: var(--color-fire-600);

  --water-900: var(--color-water-900);
  --water-800: var(--color-water-800);
  --water-700: var(--color-water-700);
  --water-600: var(--color-water-600);
  --water-500: var(--color-water-500);
  --water-200: var(--color-water-200);
  --water-100: var(--color-water-100);

  --wood-500: var(--color-wood-500);
  --wood-400: var(--color-wood-400);
  --wood-100: var(--color-wood-100);

  --metal-500: var(--color-metal-500);
  --metal-300: var(--color-metal-300);
  --metal-200: var(--color-metal-200);
  --metal-100: var(--color-metal-100);

  --bg-page: var(--surface-page);
  --bg-card: var(--surface-card);
  --bg-input: var(--surface-input);
  --bg-hover: var(--surface-hover);

  --btn-primary: var(--action-primary);
  --btn-hover: var(--action-hover);
  --btn-active: var(--action-active);
  --btn-disabled: var(--action-disabled);

  --accent-danger: var(--state-danger);
  --accent2: var(--state-info);
}

@media (max-width: 640px) {
  :root,
  :root[data-theme="wuxing-light"] {
    --text-xl: 1.5rem;      /* 24px */
    --text-2xl: 1.625rem;   /* 26px */
    --text-3xl: 2rem;       /* 32px */
    --text-4xl: 2.625rem;   /* 42px */
    --type-profile-name: var(--text-base);
    --type-profile-meta: var(--text-sm);
    --type-profile-chip: var(--text-xs);
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3.25rem;   /* 52px */
    --space-3xl: 5.25rem;   /* 84px */
    --gua-title: 1.75rem;   /* 28px */
  }
}