/* shared/theme.css - 赣南HAM网 统一设计规范体系 Design Tokens
 * 移动端/小程序 -> MD3 Expressive (赣南红品牌体系 + 药丸胶囊)
 * 桌面端 -> Microsoft Fluent 2 官方体系规范 (赣南红色阶 + 6px圆角 + Subtle描边 + Shadow深度层级)
 * 全平台严格遵循离线优先与高对比度易读性规范
 */

:root {
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Variable', Roboto, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-family-mono: 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;

  /* 赣南红品牌主色 Ramp (基于 #D72727 精确推导 Fluent 2 / MD3 色阶) */
  --brand-primary: #D72727;
  --brand-primary-rgb: 215, 39, 39;

  /* Fluent 2 Brand Ramp (Red-based) */
  --colorBrandBackground: #D72727;
  --colorBrandBackgroundHover: #BE1818;
  --colorBrandBackgroundPressed: #A31010;
  --colorBrandBackgroundSelected: #8B0B0B;
  --colorBrandForeground1: #D72727;
  --colorBrandForeground2: #B31B1B;
  --colorBrandStroke1: #D72727;
  --colorBrandStroke2: #F06A6A;
  --colorBrandBackground2: #FDF2F2;
  --colorCompoundBrandBackground: #D72727;
  --colorCompoundBrandBackgroundHover: #BE1818;
  --colorCompoundBrandForeground1: #D72727;
  --colorCompoundBrandStroke: #D72727;

  /* MD3 Tone Ramp */
  --md-sys-color-primary: #D72727;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDAD6;
  --md-sys-color-on-primary-container: #410002;
  --md-sys-color-secondary: #775653;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFDAD6;
  --md-sys-color-on-secondary-container: #2C1513;
  --md-sys-color-tertiary: #705B2E;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FCE0A2;
  --md-sys-color-on-tertiary-container: #261A00;
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  /* 基础动画与曲线 */
  --curve-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-short: 150ms;
  --duration-medium: 250ms;
}

/* 浅色模式 (Light Mode) */
html:not([data-theme="dark"]),
html[data-theme="light"] {
  color-scheme: light;

  /* Fluent 2 Neutral Tokens (Light) */
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralForeground4: #707070;
  --colorNeutralForegroundDisabled: #A6A6A6;
  --colorNeutralBackground1: #FFFFFF;
  --colorNeutralBackground2: #F5F5F5;
  --colorNeutralBackground3: #EBEBEB;
  --colorNeutralBackground4: #E0E0E0;
  --colorNeutralBackground5: #D1D1D1;
  --colorNeutralBackgroundDisabled: #F0F0F0;
  --colorNeutralStroke1: #D1D1D1;
  --colorNeutralStroke2: #E0E0E0;
  --colorNeutralStroke3: #F0F0F0;
  --colorNeutralStrokeAccessible: #616161;
  --colorSubtleBackground: transparent;
  --colorSubtleBackgroundHover: rgba(0, 0, 0, 0.04);
  --colorSubtleBackgroundPressed: rgba(0, 0, 0, 0.08);
  --colorSubtleBackgroundSelected: rgba(0, 0, 0, 0.06);

  /* Fluent 2 Elevation Shadows */
  --shadow2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
  --shadow8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
  --shadow16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
  --shadow28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);

  /* MD3 Neutral Tokens (Light) */
  --md-sys-color-background: #FCFDF6;
  --md-sys-color-on-background: #1A1C18;
  --md-sys-color-surface: #FCFDF6;
  --md-sys-color-on-surface: #1A1C18;
  --md-sys-color-surface-variant: #E1E4D5;
  --md-sys-color-on-surface-variant: #44483D;
  --md-sys-color-outline: #74796B;
  --md-sys-color-outline-variant: #C4C8BA;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F6F7F0;
  --md-sys-color-surface-container: #F0F1EA;
  --md-sys-color-surface-container-high: #EAEBE5;
  --md-sys-color-surface-container-highest: #E4E6DF;
}

/* 深色模式 (Dark Mode) */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Fluent 2 Brand Ramp (Dark) */
  --colorBrandBackground: #D72727;
  --colorBrandBackgroundHover: #E03E3E;
  --colorBrandBackgroundPressed: #B31B1B;
  --colorBrandBackgroundSelected: #8B0B0B;
  --colorBrandForeground1: #FF8080;
  --colorBrandForeground2: #FFA3A3;
  --colorBrandStroke1: #FF8080;
  --colorBrandStroke2: #D72727;
  --colorBrandBackground2: #381212;
  --colorCompoundBrandBackground: #E03E3E;
  --colorCompoundBrandBackgroundHover: #F06A6A;
  --colorCompoundBrandForeground1: #FF8080;
  --colorCompoundBrandStroke: #FF8080;

  /* Fluent 2 Neutral Tokens (Dark) */
  --colorNeutralForeground1: #FFFFFF;
  --colorNeutralForeground2: #D6D6D6;
  --colorNeutralForeground3: #ADADAD;
  --colorNeutralForeground4: #999999;
  --colorNeutralForegroundDisabled: #5C5C5C;
  --colorNeutralBackground1: #1F1F1F;
  --colorNeutralBackground2: #141414;
  --colorNeutralBackground3: #292929;
  --colorNeutralBackground4: #333333;
  --colorNeutralBackground5: #3D3D3D;
  --colorNeutralBackgroundDisabled: #242424;
  --colorNeutralStroke1: #383838;
  --colorNeutralStroke2: #2E2E2E;
  --colorNeutralStroke3: #242424;
  --colorNeutralStrokeAccessible: #ADADAD;
  --colorSubtleBackground: transparent;
  --colorSubtleBackgroundHover: rgba(255, 255, 255, 0.06);
  --colorSubtleBackgroundPressed: rgba(255, 255, 255, 0.09);
  --colorSubtleBackgroundSelected: rgba(255, 255, 255, 0.07);

  /* Fluent 2 Elevation Shadows (Dark) */
  --shadow2: 0 0 2px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.36);
  --shadow4: 0 0 2px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.40);
  --shadow8: 0 0 2px rgba(0, 0, 0, 0.40), 0 4px 8px rgba(0, 0, 0, 0.48);
  --shadow16: 0 0 2px rgba(0, 0, 0, 0.40), 0 8px 16px rgba(0, 0, 0, 0.52);
  --shadow28: 0 0 8px rgba(0, 0, 0, 0.45), 0 14px 28px rgba(0, 0, 0, 0.56);

  /* MD3 Neutral Tokens (Dark) */
  --md-sys-color-background: #12140E;
  --md-sys-color-on-background: #E2E3DC;
  --md-sys-color-surface: #12140E;
  --md-sys-color-on-surface: #E2E3DC;
  --md-sys-color-surface-variant: #44483D;
  --md-sys-color-on-surface-variant: #C4C8BA;
  --md-sys-color-outline: #8E9285;
  --md-sys-color-outline-variant: #44483D;
  --md-sys-color-surface-container-lowest: #0D0F0A;
  --md-sys-color-surface-container-low: #1A1C16;
  --md-sys-color-surface-container: #1E201A;
  --md-sys-color-surface-container-high: #282B24;
  --md-sys-color-surface-container-highest: #33362E;
}

/* 视觉引擎基准布局 (Fluent 2 vs MD3) */
html[data-engine="fluent"] {
  --border-radius-base: 6px;
  --border-radius-card: 6px;
  --border-radius-button: 6px;
  --border-radius-input: 6px;
  --border-radius-tag: 4px;
  background-color: var(--colorNeutralBackground2);
  color: var(--colorNeutralForeground1);
  font-family: var(--font-family-base);
}

html[data-engine="fluent"] .mobile-only {
  display: none !important;
}

html[data-engine="fluent"] .desktop-only {
  display: flex !important;
}

html[data-engine="md3"],
html[data-engine="md3expressive"],
html[data-engine="miuix"] {
  --border-radius-base: 24px;
  --border-radius-card: 20px;
  --border-radius-button: 9999px;
  --border-radius-input: 16px;
  --border-radius-tag: 8px;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: var(--font-family-base);
}

html[data-engine="md3"] .desktop-only,
html[data-engine="md3expressive"] .desktop-only,
html[data-engine="miuix"] .desktop-only {
  display: none !important;
}

html[data-engine="md3"] .mobile-only,
html[data-engine="md3expressive"] .mobile-only,
html[data-engine="miuix"] .mobile-only {
  display: flex !important;
}