/* AppShare 公共主题样式 — Glassmorphism + Apple Whitespace */
/* 所有页面统一使用此主题配置 */

:root {
  /* ==================== Primary Colors — 苹果蓝点缀 ==================== */
  --md-primary: #0071e3;
  --md-primary-rgb: 0, 113, 227;
  --md-primary-dark: #0077ed;
  --md-on-primary: #ffffff;
  --md-primary-container: #e8f0fe;
  --md-on-primary-container: #003a75;

  /* Primary — 纯色，不再使用渐变 */
  --primary-gradient: #0071e3;

  /* ==================== Secondary Colors ==================== */
  --md-secondary: #86868b;
  --md-secondary-rgb: 134, 134, 139;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #f5f5f7;
  --md-on-secondary-container: #1d1d1f;

  /* Secondary — 纯色 */
  --secondary-gradient: #86868b;

  /* ==================== Tertiary Colors ==================== */
  --md-tertiary: #0071e3;
  --md-tertiary-rgb: 0, 113, 227;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #e8f0fe;
  --md-on-tertiary-container: #003a75;

  /* Tertiary */
  --success-gradient: #34c759;
  --accent-gradient: #0071e3;

  /* ==================== Error Colors ==================== */
  --md-error: #ff3b30;
  --md-on-error: #ffffff;
  --md-error-container: #ffe5e3;
  --md-on-error-container: #5a0000;

  /* ==================== Surface Colors — 纯白 + 极浅灰 ==================== */
  --md-surface: #ffffff;
  --md-on-surface: #1d1d1f;
  --md-surface-variant: #f5f5f7;
  --md-on-surface-variant: #86868b;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #fbfbfd;
  --md-surface-container: #f5f5f7;
  --md-surface-container-high: #efefef;
  --md-surface-container-highest: #e8e8ed;

  /* Background Colors */
  --md-background: #ffffff;
  --md-on-background: #1d1d1f;

  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f7;
  --bg-tertiary: #efefef;
  --bg-card: #ffffff;

  /* ==================== Text Colors — 苹果色阶 ==================== */
  --text-primary: #1d1d1f;
  --text-secondary: #86868b;
  --text-tertiary: #aeaeb2;

  /* ==================== Border & Outline — 极淡 ==================== */
  --md-outline: #c7c7cc;
  --md-outline-variant: #e5e5ea;
  --border-color: #e5e5ea;
  --border-hover: #c7c7cc;

  /* ==================== Inverse Colors ==================== */
  --md-inverse-surface: #1d1d1f;
  --md-inverse-on-surface: #f5f5f7;
  --md-inverse-primary: #64b5f6;

  /* ==================== Glassmorphism — 毛玻璃 ==================== */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-heavy: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: 20px;
  --glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);

  /* ==================== Shadow — 极淡阴影 ==================== */
  --md-shadow: #000000;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.08);

  --md-elevation-level0: none;
  --md-elevation-level1: 0 1px 3px rgba(0, 0, 0, 0.04);
  --md-elevation-level2: 0 2px 8px rgba(0, 0, 0, 0.06);
  --md-elevation-level3: 0 4px 16px rgba(0, 0, 0, 0.08);
  --md-elevation-level4: 0 8px 24px rgba(0, 0, 0, 0.10);
  --md-elevation-level5: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* ==================== Shape — 统一圆角 ==================== */
  --md-shape-corner-none: 0px;
  --md-shape-corner-extra-small: 4px;
  --md-shape-corner-small: 8px;
  --md-shape-corner-medium: 12px;
  --md-shape-corner-large: 16px;
  --md-shape-corner-extra-large: 22px;
  --md-shape-corner-full: 50%;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* ==================== Motion — 微妙过渡 ==================== */
  --transition: all 0.3s ease;

  --md-motion-duration-short1: 50ms;
  --md-motion-duration-short2: 100ms;
  --md-motion-duration-short3: 150ms;
  --md-motion-duration-short4: 200ms;
  --md-motion-duration-medium1: 250ms;
  --md-motion-duration-medium2: 300ms;
  --md-motion-duration-medium3: 350ms;
  --md-motion-duration-medium4: 400ms;
  --md-motion-duration-long1: 450ms;
  --md-motion-duration-long2: 500ms;
  --md-motion-duration-long3: 550ms;
  --md-motion-duration-long4: 600ms;

  --md-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --md-motion-easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --md-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-emphasized-accelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-motion-easing-emphasized-decelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* ==================== Typography Scale ==================== */
  --md-typescale-display-large-font-size: 56px;
  --md-typescale-display-large-line-height: 64px;
  --md-typescale-display-large-font-weight: 700;

  --md-typescale-display-medium-font-size: 44px;
  --md-typescale-display-medium-line-height: 52px;
  --md-typescale-display-medium-font-weight: 700;

  --md-typescale-display-small-font-size: 36px;
  --md-typescale-display-small-line-height: 44px;
  --md-typescale-display-small-font-weight: 600;

  --md-typescale-headline-large-font-size: 32px;
  --md-typescale-headline-large-line-height: 40px;
  --md-typescale-headline-large-font-weight: 600;

  --md-typescale-headline-medium-font-size: 28px;
  --md-typescale-headline-medium-line-height: 36px;
  --md-typescale-headline-medium-font-weight: 600;

  --md-typescale-headline-small-font-size: 24px;
  --md-typescale-headline-small-line-height: 32px;
  --md-typescale-headline-small-font-weight: 600;

  --md-typescale-title-large-font-size: 22px;
  --md-typescale-title-large-line-height: 28px;
  --md-typescale-title-large-font-weight: 600;

  --md-typescale-title-medium-font-size: 16px;
  --md-typescale-title-medium-line-height: 24px;
  --md-typescale-title-medium-font-weight: 600;

  --md-typescale-title-small-font-size: 14px;
  --md-typescale-title-small-line-height: 20px;
  --md-typescale-title-small-font-weight: 600;

  --md-typescale-body-large-font-size: 17px;
  --md-typescale-body-large-line-height: 25px;
  --md-typescale-body-large-font-weight: 400;

  --md-typescale-body-medium-font-size: 14px;
  --md-typescale-body-medium-line-height: 20px;
  --md-typescale-body-medium-font-weight: 400;

  --md-typescale-body-small-font-size: 12px;
  --md-typescale-body-small-line-height: 16px;
  --md-typescale-body-small-font-weight: 400;

  --md-typescale-label-large-font-size: 14px;
  --md-typescale-label-large-line-height: 20px;
  --md-typescale-label-large-font-weight: 500;

  --md-typescale-label-medium-font-size: 12px;
  --md-typescale-label-medium-line-height: 16px;
  --md-typescale-label-medium-font-weight: 500;

  --md-typescale-label-small-font-size: 11px;
  --md-typescale-label-small-line-height: 16px;
  --md-typescale-label-small-font-weight: 500;

  /* ==================== State Layers ==================== */
  --md-state-hover: 0.04;
  --md-state-focus: 0.08;
  --md-state-pressed: 0.10;
  --md-state-dragged: 0.12;
}

/* ==================== Dark Mode — 苹果纯黑系 ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary — 亮蓝 (暗色模式) */
    --md-primary: #2997ff;
    --md-primary-rgb: 41, 151, 255;
    --md-on-primary: #003a75;
    --md-primary-container: #004a9f;
    --md-on-primary-container: #cce0ff;
    --md-primary-dark: #64b5f6;

    /* Secondary */
    --md-secondary: #98989d;
    --md-secondary-rgb: 152, 152, 157;
    --md-on-secondary: #1d1d1f;
    --md-secondary-container: #2c2c2e;
    --md-on-secondary-container: #e5e5ea;

    /* Tertiary */
    --md-tertiary: #2997ff;
    --md-tertiary-rgb: 41, 151, 255;
    --md-on-tertiary: #003a75;
    --md-tertiary-container: #004a9f;
    --md-on-tertiary-container: #cce0ff;

    /* Error */
    --md-error: #ff6961;
    --md-on-error: #5a0000;
    --md-error-container: #8b0000;
    --md-on-error-container: #ffdad6;

    /* Surface — 苹果纯黑系 */
    --md-surface: #000000;
    --md-on-surface: #f5f5f7;
    --md-surface-variant: #1c1c1e;
    --md-on-surface-variant: #98989d;
    --md-surface-container-lowest: #000000;
    --md-surface-container-low: #1c1c1e;
    --md-surface-container: #1c1c1e;
    --md-surface-container-high: #2c2c2e;
    --md-surface-container-highest: #3a3a3c;

    /* Background */
    --md-background: #000000;
    --md-on-background: #f5f5f7;

    --bg-primary: #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2c2c2e;
    --bg-card: #1c1c1e;

    /* Text */
    --text-primary: #f5f5f7;
    --text-secondary: #98989d;
    --text-tertiary: #636366;

    /* Border */
    --md-outline: #48484a;
    --md-outline-variant: #38383a;
    --border-color: #38383a;
    --border-hover: #48484a;

    /* Inverse */
    --md-inverse-surface: #f5f5f7;
    --md-inverse-on-surface: #1d1d1f;
    --md-inverse-primary: #0071e3;

    /* Glassmorphism — 暗色毛玻璃 */
    --glass-bg: rgba(28, 28, 30, 0.72);
    --glass-bg-heavy: rgba(28, 28, 30, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);

    /* Shadow — 暗色模式 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.18);
    --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.24);

    --md-elevation-level0: none;
    --md-elevation-level1: 0 1px 3px rgba(0, 0, 0, 0.16);
    --md-elevation-level2: 0 2px 8px rgba(0, 0, 0, 0.2);
    --md-elevation-level3: 0 4px 16px rgba(0, 0, 0, 0.24);
    --md-elevation-level4: 0 8px 24px rgba(0, 0, 0, 0.28);
    --md-elevation-level5: 0 12px 32px rgba(0, 0, 0, 0.32);
  }
}

/* ==================== 滚动条 — 极简灰 ==================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--md-outline);
  border: 2px solid transparent;
  background-clip: content-box;
}