/**
 * MD3 Expressive Design Tokens
 * 全站统一 Token 源 — 叠加补全 material-design-3.css
 * 
 * 17 类 Token：
 * 1.配色  2.排版  3.间距  4.形状  5.阴影  6.动效  7.断点
 * 8.交互状态  9.Z-index  10.无障碍  11.图标  12.边框
 * 13.遮罩/透明度  14.电商布局  15.多语种  16.表格  17.电商专用
 */

/* ============================================================
   1. 配色 (Color) — Light Mode 蓝色系
   ============================================================ */
:root {
  /* --- Primary --- */
  --md3-color-primary: #005fb8;             /* ← 统一值（原 #1976d2 已废弃）*/
  --md3-color-primary-rgb: 0, 95, 184;
  --md3-color-primary-dark: #004578;        /* hover / pressed 加深版 */
  --md3-color-on-primary: #ffffff;
  --md3-color-primary-container: #d0e8ff;
  --md3-color-on-primary-container: #001d35;

  /* --- Secondary --- */
  --md3-color-secondary: #4f6680;
  --md3-color-on-secondary: #ffffff;
  --md3-color-secondary-container: #d4e4f7;
  --md3-color-on-secondary-container: #0c1e2e;

  /* --- Tertiary --- */
  --md3-color-tertiary: #6b5778;
  --md3-color-on-tertiary: #ffffff;
  --md3-color-tertiary-container: #f3daff;
  --md3-color-on-tertiary-container: #251432;

  /* --- Error --- */
  --md3-color-error: #c62828;               /* ← 统一值（原 #ba1a1a 已废弃）*/
  --md3-color-on-error: #ffffff;
  --md3-color-error-container: #ffdad6;
  --md3-color-on-error-container: #410002;

  /* --- Surface --- */
  --md3-color-surface: #fafcff;
  --md3-color-on-surface: #1a1c1e;
  --md3-color-surface-variant: #dfe2eb;
  --md3-color-on-surface-variant: #43474e;
  --md3-color-surface-container-lowest: #ffffff;
  --md3-color-surface-container-low: #f3f5f9;
  --md3-color-surface-container: #edf0f4;
  --md3-color-surface-container-high: #e7e9ed;
  --md3-color-surface-container-highest: #e1e3e7;

  /* --- Outline --- */
  --md3-color-outline: #73777f;
  --md3-color-outline-variant: #c3c6cf;

  /* --- Inverse --- */
  --md3-color-inverse-surface: #2f3033;
  --md3-color-inverse-on-surface: #f1f0f4;
  --md3-color-inverse-primary: #a0cafd;

  /* --- Scrim --- */
  --md3-color-scrim: rgba(0, 0, 0, 0.32);

  /* --- Semantic（电商专用）--- */
  --md3-color-success: #1a7f4e;             /* 收入 / 通过 / 绿 */
  --md3-color-on-success: #ffffff;
  --md3-color-warning: #e65100;             /* 警告 / 橙 */
  --md3-color-on-warning: #ffffff;
  --md3-color-info: #0277bd;                /* 信息 / 浅蓝 */
  --md3-color-on-info: #ffffff;

  /* ============================================================
     2. 排版 (Typography) — 15 级 + 统一字体栈
     ============================================================ */
  --md3-font-family: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Noto Sans', 'Roboto', sans-serif;

  /* Display */
  --md3-typescale-display-large-size: 57px;
  --md3-typescale-display-large-weight: 400;
  --md3-typescale-display-large-line-height: 64px;
  --md3-typescale-display-large-tracking: -0.25px;

  --md3-typescale-display-medium-size: 45px;
  --md3-typescale-display-medium-weight: 400;
  --md3-typescale-display-medium-line-height: 52px;
  --md3-typescale-display-medium-tracking: 0px;

  --md3-typescale-display-small-size: 36px;
  --md3-typescale-display-small-weight: 400;
  --md3-typescale-display-small-line-height: 44px;
  --md3-typescale-display-small-tracking: 0px;

  /* Headline */
  --md3-typescale-headline-large-size: 32px;
  --md3-typescale-headline-large-weight: 400;
  --md3-typescale-headline-large-line-height: 40px;

  --md3-typescale-headline-medium-size: 28px;
  --md3-typescale-headline-medium-weight: 400;
  --md3-typescale-headline-medium-line-height: 36px;

  --md3-typescale-headline-small-size: 24px;
  --md3-typescale-headline-small-weight: 400;
  --md3-typescale-headline-small-line-height: 32px;

  /* Title */
  --md3-typescale-title-large-size: 22px;
  --md3-typescale-title-large-weight: 500;
  --md3-typescale-title-large-line-height: 28px;

  --md3-typescale-title-medium-size: 16px;
  --md3-typescale-title-medium-weight: 500;
  --md3-typescale-title-medium-line-height: 24px;
  --md3-typescale-title-medium-tracking: 0.15px;

  --md3-typescale-title-small-size: 14px;
  --md3-typescale-title-small-weight: 500;
  --md3-typescale-title-small-line-height: 20px;
  --md3-typescale-title-small-tracking: 0.1px;

  /* Body */
  --md3-typescale-body-large-size: 16px;
  --md3-typescale-body-large-weight: 400;
  --md3-typescale-body-large-line-height: 24px;
  --md3-typescale-body-large-tracking: 0.5px;

  --md3-typescale-body-medium-size: 14px;
  --md3-typescale-body-medium-weight: 400;
  --md3-typescale-body-medium-line-height: 20px;
  --md3-typescale-body-medium-tracking: 0.25px;

  --md3-typescale-body-small-size: 12px;
  --md3-typescale-body-small-weight: 400;
  --md3-typescale-body-small-line-height: 16px;
  --md3-typescale-body-small-tracking: 0.4px;

  /* Label */
  --md3-typescale-label-large-size: 14px;
  --md3-typescale-label-large-weight: 500;
  --md3-typescale-label-large-line-height: 20px;
  --md3-typescale-label-large-tracking: 0.1px;

  --md3-typescale-label-medium-size: 12px;
  --md3-typescale-label-medium-weight: 500;
  --md3-typescale-label-medium-line-height: 16px;
  --md3-typescale-label-medium-tracking: 0.5px;

  --md3-typescale-label-small-size: 11px;
  --md3-typescale-label-small-weight: 500;
  --md3-typescale-label-small-line-height: 16px;
  --md3-typescale-label-small-tracking: 0.5px;

  /* ============================================================
     3. 间距 (Spacing) — 4px 网格
     ============================================================ */
  --md3-spacing-1: 4px;
  --md3-spacing-2: 8px;
  --md3-spacing-3: 12px;
  --md3-spacing-4: 16px;
  --md3-spacing-5: 20px;
  --md3-spacing-6: 24px;
  --md3-spacing-8: 32px;
  --md3-spacing-10: 40px;
  --md3-spacing-12: 48px;
  --md3-spacing-16: 64px;

  /* ============================================================
     4. 形状 (Shape) — 7 级圆角
     ============================================================ */
  --md3-shape-none: 0px;
  --md3-shape-xs: 4px;
  --md3-shape-sm: 8px;
  --md3-shape-md: 12px;
  --md3-shape-lg: 16px;
  --md3-shape-xl: 28px;
  --md3-shape-full: 9999px;

  /* ============================================================
     5. 阴影 (Elevation) — Light Mode
     ============================================================ */
  --md3-elevation-0: none;
  --md3-elevation-1: 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px 1px rgba(0,0,0,0.08);
  --md3-elevation-2: 0 1px 2px rgba(0,0,0,0.1), 0 2px 6px 2px rgba(0,0,0,0.08);
  --md3-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.1);
  --md3-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.08), 0 2px 3px rgba(0,0,0,0.1);
  --md3-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.08), 0 4px 4px rgba(0,0,0,0.1);

  /* ============================================================
     6. 动效 (Motion) — MD3 Expressive
     ============================================================ */
  --md3-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md3-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md3-motion-easing-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md3-motion-easing-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  --md3-motion-duration-short: 150ms;
  --md3-motion-duration-medium: 300ms;
  --md3-motion-duration-long: 500ms;
  --md3-motion-duration-extra-long: 800ms;

  /* ============================================================
     7. 响应式断点 (Breakpoints) — 仅做文档记录，CSS 中用 @media
     --md3-breakpoint-compact:      0px
     --md3-breakpoint-medium:       600px
     --md3-breakpoint-expanded:     840px
     --md3-breakpoint-large:        1200px
     --md3-breakpoint-extra-large:  1600px
     ============================================================ */

  /* ============================================================
     8. 交互状态层 (State Layer)
     ============================================================ */
  --md3-state-hover-opacity: 0.08;
  --md3-state-focus-opacity: 0.10;
  --md3-state-pressed-opacity: 0.10;
  --md3-state-dragged-opacity: 0.16;
  --md3-state-disabled-opacity: 0.38;
  --md3-state-disabled-container-opacity: 0.12;

  /* ============================================================
     9. Z-index 层级
     ============================================================ */
  --md3-z-dropdown: 100;
  --md3-z-sticky: 200;
  --md3-z-drawer: 400;
  --md3-z-modal: 500;
  --md3-z-snackbar: 600;
  --md3-z-tooltip: 700;
  --md3-z-scrim: 800;
  --md3-z-overlay: 900;

  /* ============================================================
     10. 无障碍 (Accessibility)
     ============================================================ */
  --md3-focus-ring-width: 2px;
  --md3-focus-ring-offset: 2px;
  --md3-focus-ring-color: var(--md3-color-primary);
  --md3-touch-target-min: 48px;

  /* ============================================================
     11. 图标 (Icon)
     ============================================================ */
  --md3-icon-sm: 18px;
  --md3-icon-md: 24px;
  --md3-icon-lg: 28px;
  --md3-icon-xl: 40px;
  --md3-icon-display: 48px;

  /* ============================================================
     12. 边框/分割线 (Border)
     ============================================================ */
  --md3-border-thin: 1px;
  --md3-border-medium: 2px;
  --md3-border-color: var(--md3-color-outline-variant);
  --md3-divider-color: var(--md3-color-outline-variant);
  --md3-divider-inset: 16px;

  /* ============================================================
     13. 遮罩/透明度 (Overlay)
     ============================================================ */
  --md3-scrim-opacity: 0.32;
  --md3-skeleton-base: var(--md3-color-surface-container);
  --md3-skeleton-shine: var(--md3-color-surface-container-high);

  /* ============================================================
     14. 电商布局 (Layout)
     ============================================================ */
  --md3-content-max-width: 1200px;
  --md3-content-max-width-wide: 1440px;
  --md3-sidebar-width: 280px;
  --md3-sidebar-collapsed: 72px;
  --md3-grid-gap: 16px;
  --md3-product-cols-compact: 2;
  --md3-product-cols-medium: 3;
  --md3-product-cols-expanded: 4;
  --md3-product-cols-large: 5;
  --md3-sticky-header-h: 64px;
  --md3-sticky-bottom-h: 64px;
  --md3-bottom-nav-h: 80px;

  /* ============================================================
     15. 多语种 (i18n)
     ============================================================ */
  --md3-label-min-width: 80px;
  --md3-button-min-width: 64px;
  --md3-nav-item-min-width: 48px;

  /* ============================================================
     16. 表格 (Table)
     ============================================================ */
  --md3-table-row-height: 52px;
  --md3-table-header-height: 56px;
  --md3-table-cell-padding: 16px;
  --md3-table-stripe-color: var(--md3-color-surface-container-low);
  --md3-table-hover-color: rgba(var(--md3-color-primary-rgb), 0.04);
  --md3-table-border-color: var(--md3-color-outline-variant);

  /* ============================================================
     17. 电商专用 (Commerce)
     ============================================================ */
  --md3-price-size: 24px;
  --md3-price-size-lg: 32px;
  --md3-price-size-sm: 14px;
  --md3-price-weight: 700;
  --md3-price-color: var(--md3-color-error);
  --md3-price-original-color: var(--md3-color-on-surface-variant);

  --md3-pay-card-height: 64px;
  --md3-pay-card-radius: var(--md3-shape-md);
  --md3-pay-card-border: var(--md3-color-outline-variant);
  --md3-pay-card-selected-border: var(--md3-color-primary);
  --md3-pay-card-selected-bg: var(--md3-color-primary-container);

  --md3-order-status-pending: #ffb74d;
  --md3-order-status-on-pending: #332200;
  --md3-order-status-processing: var(--md3-color-primary-container);
  --md3-order-status-on-processing: var(--md3-color-on-primary-container);
  --md3-order-status-completed: #c8e6c9;
  --md3-order-status-on-completed: #1b5e20;
  --md3-order-status-cancelled: var(--md3-color-surface-container-high);
  --md3-order-status-on-cancelled: var(--md3-color-on-surface-variant);
  --md3-order-status-refund: var(--md3-color-error-container);
  --md3-order-status-on-refund: var(--md3-color-on-error-container);
}

/* ============================================================
   Dark Mode — 青蓝色系
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md3-color-primary: #A0E1FF;
    --md3-color-primary-rgb: 160, 225, 255;
    --md3-color-on-primary: #003544;
    --md3-color-primary-container: #004C68;
    --md3-color-on-primary-container: #BDE9FF;

    --md3-color-secondary: #b8c8e0;
    --md3-color-on-secondary: #233040;
    --md3-color-secondary-container: #394758;
    --md3-color-on-secondary-container: #d8e3f8;

    --md3-color-tertiary: #d7bde4;
    --md3-color-on-tertiary: #3b2948;
    --md3-color-tertiary-container: #533f60;
    --md3-color-on-tertiary-container: #f3daff;

    --md3-color-error: #ffb4ab;
    --md3-color-on-error: #690005;
    --md3-color-error-container: #93000a;
    --md3-color-on-error-container: #ffdad6;

    --md3-color-surface: #121212;
    --md3-color-on-surface: #f5f5f5;
    --md3-color-surface-variant: #43474e;
    --md3-color-on-surface-variant: #d1d1d1; /* 全局统一调亮：次要文本 */
    --md3-color-surface-container-lowest: #0d0d0d;
    --md3-color-surface-container-low: #1a1d21;
    --md3-color-surface-container: #1e1e1e;
    --md3-color-surface-container-high: #2e343b;
    --md3-color-surface-container-highest: #383e45;

    --md3-color-outline: #a0a0a0;
    --md3-color-outline-variant: #6a6a6a;

    --md3-color-inverse-surface: #e1e3e7;
    --md3-color-inverse-on-surface: #2f3033;
    --md3-color-inverse-primary: #005f73;

    --md3-color-scrim: rgba(0, 0, 0, 0.52);

    --md3-color-success: #66bb6a;
    --md3-color-warning: #ffb74d;

    /* 阴影 — 青蓝色光晕 */
    --md3-elevation-1: 0 1px 3px rgba(24,255,255,0.15), 0 1px 2px rgba(24,255,255,0.2);
    --md3-elevation-2: 0 3px 6px rgba(24,255,255,0.18), 0 3px 6px rgba(24,255,255,0.22);
    --md3-elevation-3: 0 6px 12px rgba(24,255,255,0.2), 0 4px 6px rgba(24,255,255,0.25);
    --md3-elevation-4: 0 10px 20px rgba(24,255,255,0.22), 0 4px 8px rgba(24,255,255,0.2);
    --md3-elevation-5: 0 16px 32px rgba(24,255,255,0.25), 0 6px 10px rgba(24,255,255,0.2);

    /* 骨架屏 */
    --md3-skeleton-base: var(--md3-color-surface-container);
    --md3-skeleton-shine: var(--md3-color-surface-container-high);

    /* 电商 */
    --md3-price-color: #ff6e6e;
    --md3-order-status-pending: #ffb74d;
    --md3-order-status-on-pending: #332200;
    --md3-order-status-processing: #0277bd;
    --md3-order-status-completed: #2e7d32;
    --md3-order-status-cancelled: #616161;
    --md3-order-status-refund: #c62828;
    --md3-pay-card-selected-bg: rgba(24, 255, 255, 0.12);
    --md3-pay-card-selected-border: #18FFFF;
  }
}

/* 手动切换 Dark */
:root[data-theme="dark"],
:root.theme-dark {
  --md3-color-primary: #A0E1FF;
  --md3-color-primary-rgb: 160, 225, 255;
  --md3-color-on-primary: #003544;
  --md3-color-primary-container: #004C68;
  --md3-color-on-primary-container: #BDE9FF;

  --md3-color-secondary: #b8c8e0;
  --md3-color-on-secondary: #233040;
  --md3-color-secondary-container: #394758;
  --md3-color-on-secondary-container: #d8e3f8;

  --md3-color-tertiary: #d7bde4;
  --md3-color-on-tertiary: #3b2948;
  --md3-color-tertiary-container: #533f60;
  --md3-color-on-tertiary-container: #f3daff;

  --md3-color-error: #ffb4ab;
  --md3-color-on-error: #690005;
  --md3-color-error-container: #93000a;
  --md3-color-on-error-container: #ffdad6;

  --md3-color-surface: #121212;
  --md3-color-on-surface: #f5f5f5;
  --md3-color-surface-variant: #43474e;
  --md3-color-on-surface-variant: #e8e8e8;
  --md3-color-surface-container-lowest: #0d0d0d;
  --md3-color-surface-container-low: #1a1d21;
  --md3-color-surface-container: #1e1e1e;
  --md3-color-surface-container-high: #2e343b;
  --md3-color-surface-container-highest: #383e45;

  --md3-color-outline: #a0a0a0;
  --md3-color-outline-variant: #6a6a6a;

  --md3-color-inverse-surface: #e1e3e7;
  --md3-color-inverse-on-surface: #2f3033;
  --md3-color-inverse-primary: #006684;

  --md3-color-scrim: rgba(0, 0, 0, 0.52);

  --md3-color-success: #66bb6a;
  --md3-color-warning: #ffb74d;
  --md3-color-on-warning: #332200;

  --md3-elevation-1: 0 1px 3px rgba(24,255,255,0.15), 0 1px 2px rgba(24,255,255,0.2);
  --md3-elevation-2: 0 3px 6px rgba(24,255,255,0.18), 0 3px 6px rgba(24,255,255,0.22);
  --md3-elevation-3: 0 6px 12px rgba(24,255,255,0.2), 0 4px 6px rgba(24,255,255,0.25);
  --md3-elevation-4: 0 10px 20px rgba(24,255,255,0.22), 0 4px 8px rgba(24,255,255,0.2);
  --md3-elevation-5: 0 16px 32px rgba(24,255,255,0.25), 0 6px 10px rgba(24,255,255,0.2);

  --md3-skeleton-base: var(--md3-color-surface-container);
  --md3-skeleton-shine: var(--md3-color-surface-container-high);

  --md3-price-color: #ff6e6e;
  --md3-order-status-pending: #ffb74d;
  --md3-order-status-on-pending: #332200;
  --md3-order-status-processing: #d0e4ff;
  --md3-order-status-on-processing: #001d35;
  --md3-order-status-completed: #c8e6c9;
  --md3-order-status-on-completed: #002105;
  --md3-order-status-cancelled: #e1e3e7;
  --md3-order-status-on-cancelled: #1a1c1e;
  --md3-order-status-refund: #ffdad6;
  --md3-order-status-on-refund: #410002;
  --md3-pay-card-selected-bg: rgba(24, 255, 255, 0.12);
  --md3-pay-card-selected-border: #18FFFF;
}

/* ============================================================
   无障碍：减少动效
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --md3-motion-duration-short: 0ms;
    --md3-motion-duration-medium: 0ms;
    --md3-motion-duration-long: 0ms;
    --md3-motion-duration-extra-long: 0ms;
  }
}

/* ============================================================
   打印样式
   ============================================================ */
@media print {
  :root {
    --md3-color-surface: #ffffff;
    --md3-color-on-surface: #000000;
    --md3-color-primary: #000000;
    --md3-elevation-1: none;
    --md3-elevation-2: none;
    --md3-elevation-3: none;
    --md3-elevation-4: none;
    --md3-elevation-5: none;
  }
}

/* ============================================================
   Utility
   ============================================================ */
.md3-fw-bold { font-weight: 700 !important; }
img { vertical-align: middle; }