/**
 * MC Web Store · Apple Liquid Glass 设计令牌
 */
:root {
  --background: transparent;
  --bg: transparent;

  --surface1: rgba(255, 255, 255, 0.72);
  --surface2: rgba(255, 255, 255, 0.55);
  --surface-solid: rgba(255, 255, 255, 0.88);

  --border: rgba(255, 255, 255, 0.45);
  --border-visible: rgba(0, 0, 0, 0.08);

  --text1: #1d1d1f;
  --text2: #6e6e73;
  --text3: #424245;
  --text-on-glass: #1d1d1f;
  --text-on-glass-muted: #6e6e73;
  --text-on-bg: #ffffff;
  --text-on-bg-muted: rgba(255, 255, 255, 0.82);

  --accent: #007aff;
  --accent-hover: #0066d6;
  --accent-secondary: #5856d6;
  --accent-tertiary: #af52de;
  --accent-subtle: rgba(0, 122, 255, 0.12);

  --green-light: #34c759;
  --green-mid: #30b350;
  --green-deep: #248a3d;

  --liquid-blur: blur(40px) saturate(180%);
  --liquid-blur-heavy: blur(60px) saturate(200%);
  --ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ios-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  --liquid-glass: rgba(255, 255, 255, 0.58);
  --liquid-glass-strong: rgba(255, 255, 255, 0.78);
  --liquid-glass-border: rgba(255, 255, 255, 0.62);
  --liquid-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --liquid-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  --liquid-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.08);

  --grad-cinema: linear-gradient(135deg, #007aff 0%, #5856d6 50%, #af52de 100%);
  --grad-hero: transparent;
  --grad-card: linear-gradient(160deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.65) 100%);
  --grad-green: linear-gradient(135deg, #34c759 0%, #30b350 100%);
  --grad-green-hover: linear-gradient(135deg, #40d366 0%, #28a745 100%);
  --glow-accent: none;
  --glow-blue: none;

  --success: #34c759;
  --warning: #ff9500;
  --danger: #ff3b30;
  --info: #007aff;

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --radius-control: 14px;
  --radius-media: 18px;
  --radius-card: 22px;
  --radius-sheet: 28px;
  --radius-pill: 980px;

  --duration: 320ms;
  --duration-fast: 200ms;
  --ease-out: var(--ios-ease);
  --max-width: 1200px;

  --bg-image: url("https://img.api.aa1.cn/2026/06/18/262fb83c44270.png");
  --bg-overlay: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.06) 45%,
    rgba(0, 0, 0, 0.14) 100%
  );

  --text-shadow-readable: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25);

  --shadow-sm: var(--liquid-shadow);
  --shadow-md: var(--liquid-shadow-lg);
  --shadow-card: var(--liquid-shadow);
  --shadow-neon: var(--liquid-shadow-lg);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.2);

  --green: var(--green-mid);
  --green-dark: var(--green-deep);
  --green-light-token: var(--green-light);
  --green-deep: var(--green-deep);
  --green-glow: var(--accent-subtle);
  --blue: var(--accent);
  --blue-dark: var(--accent-hover);
  --blue-light: #64b5ff;
  --purple: var(--accent-secondary);
  --purple-light: #8b89e8;
  --gold: var(--warning);
  --gold-dark: #cc7700;
  --coral: var(--danger);

  --bg-page: transparent;
  --bg-page-alt: rgba(255, 255, 255, 0.45);
  --bg-card: var(--surface1);
  --bg-card-hover: var(--surface-solid);
  --bg-glass: var(--liquid-glass);

  --text-heading: var(--text-on-glass);
  --text-body: var(--text-on-glass);
  --text-secondary: var(--text-on-glass-muted);
  --text-muted: var(--text-on-glass-muted);
  --text-inverse: #ffffff;

  --border-strong: var(--border-visible);
  --border-green: rgba(52, 199, 89, 0.35);
  --border-blue: rgba(0, 122, 255, 0.3);

  --grad-blue: var(--grad-cinema);
  --grad-gold: linear-gradient(135deg, #ffcc00, #ff9500);
  --grad-danger: linear-gradient(135deg, #ff6b6b, #ff3b30);
  --shadow-green: var(--shadow-sm);
  --shadow-blue: var(--shadow-sm);
  --shadow-gold: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-elevated: var(--shadow-md);

  --radius-sm: 10px;
  --radius-md: var(--radius-media);
  --radius-lg: var(--radius-card);
  --radius-xl: var(--radius-sheet);
  --radius-2xl: 32px;
  --radius-full: var(--radius-pill);

  --transition: var(--duration) var(--ios-spring);
  --transition-slow: 420ms var(--ios-spring);
  --ease-spring: var(--ios-spring);
  --depth-1: translateY(0);
  --depth-2: translateY(-1px);
  --depth-3: translateY(-2px);
  --depth-4: translateY(-3px);

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}

body.dark {
  --surface1: rgba(28, 28, 30, 0.72);
  --surface2: rgba(44, 44, 46, 0.55);
  --surface-solid: rgba(28, 28, 30, 0.88);

  --border: rgba(255, 255, 255, 0.12);
  --border-visible: rgba(255, 255, 255, 0.18);

  --text1: #f5f5f7;
  --text2: #aeaeb2;
  --text3: #d1d1d6;
  --text-on-glass: #f5f5f7;
  --text-on-glass-muted: #aeaeb2;

  --accent: #0a84ff;
  --accent-hover: #409cff;
  --accent-subtle: rgba(10, 132, 255, 0.18);

  --liquid-glass: rgba(28, 28, 30, 0.62);
  --liquid-glass-strong: rgba(28, 28, 30, 0.82);
  --liquid-glass-border: rgba(255, 255, 255, 0.14);
  --liquid-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --liquid-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  --liquid-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);

  --grad-cinema: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 50%, #bf5af2 100%);
  --grad-card: linear-gradient(160deg, rgba(44, 44, 46, 0.85) 0%, rgba(28, 28, 30, 0.72) 100%);
  --bg-page-alt: rgba(44, 44, 46, 0.55);
  --bg-overlay: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.2) 45%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
    --duration-fast: 0ms;
  }
}