/**
 * 2Live 全站设计令牌 — Platinum Iris v3
 * 所有页面共用，勿在子页面硬编码色值
 */
:root {
  /* 品牌色 */
  --brand-indigo: #6366F1;
  --brand-violet: #4F46E5;
  --brand-cyan: #22D3EE;
  --brand-emerald: #10B981;
  --brand-lime: #65A30D;
  --brand-lime-bright: #A3E635;
  --brand-live-teal: #0D9488;
  --brand-live-cyan: #14B8A6;
  --brand-amber: #F59E0B;
  --brand-rose: #F472B6;
  --brand-slate: #94A3B8;
  --brand-primary: var(--brand-indigo);

  --brand-gradient: linear-gradient(135deg, #6366F1 0%, #4F46E5 48%, #22D3EE 100%);
  --brand-gradient-nav: linear-gradient(90deg, #6366F1 0%, #818CF8 52%, #22D3EE 100%);
  --brand-gradient-soft: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-indigo) 10%, transparent),
    color-mix(in srgb, var(--brand-violet) 6%, transparent),
    color-mix(in srgb, var(--brand-cyan) 5%, transparent));

  /* 玻璃 */
  --glass-blur: 24px;
  --glass-blur-heavy: 40px;
  --glass-saturate: 1.45;
  --glass-highlight: rgba(255, 255, 255, 0.12);
  --glass-edge: rgba(255, 255, 255, 0.18);

  /* 语义别名（兼容旧名） */
  --google-blue: var(--brand-indigo);
  --google-red: var(--brand-rose);
  --google-yellow: var(--brand-amber);
  --google-green: var(--brand-emerald);
  --google-gradient: var(--brand-gradient-nav);
  --google-gradient-soft: var(--brand-gradient-soft);

  /* 字体 */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 24px;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: -0.01em;

  /* 间距 */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-full: 999px;

  /* 页面卡片 */
  --page-card-max-width: 960px;
  --page-card-min-height: 480px;
  --page-card-padding-y: 36px;
  --page-card-padding-x: 40px;

  /* 内容区容器 — 全站卡片顶边对齐 */
  --page-wrap-padding-top: var(--spacing-10);
  --page-wrap-padding-x: var(--spacing-6);
  --page-wrap-padding-bottom: var(--spacing-8);

  /* 动效时长 */
  --fx-fast: 0.15s;
  --fx-normal: 0.28s;
  --fx-slow: 0.45s;
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* 按钮 — Aurora Teal 系 */
  --btn-radius: 14px;
  --btn-radius-pill: 999px;
  --btn-teal: #14b8a6;
  --btn-teal-deep: #0f766e;
  --btn-teal-mid: #0d9488;
  --btn-teal-bright: #5eead4;
  --btn-teal-glow: rgba(20, 184, 166, 0.38);
  --btn-gradient: linear-gradient(152deg, #115e59 0%, #0d9488 40%, #2dd4bf 100%);
  --btn-gradient-hover: linear-gradient(152deg, #0f766e 0%, #14b8a6 48%, #5eead4 100%);
  --btn-shadow: 0 6px 20px rgba(13, 148, 136, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --btn-shadow-hover: 0 10px 30px rgba(20, 184, 166, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --btn-ghost-bg: color-mix(in srgb, var(--btn-teal) 6%, var(--glass-surface-2));
  --btn-ghost-border: color-mix(in srgb, var(--btn-teal) 30%, var(--border-primary));
  --btn-ghost-hover: color-mix(in srgb, var(--btn-teal) 12%, var(--glass-surface-2));
}

/* 暗色 — 纯黑底 + 语言点缀色 */
:root,
[data-theme="dark"],
.theme-dark {
  --bg-primary: #000000;
  --bg-secondary: #0A0A0A;
  --bg-tertiary: #111111;
  --bg-base: #000000;

  --glass-surface: rgba(10, 12, 20, 0.52);
  --glass-surface-2: rgba(14, 16, 26, 0.46);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-bright: color-mix(in srgb, var(--brand-primary) 22%, rgba(255, 255, 255, 0.12));

  --card-bg-1: rgba(10, 12, 20, 0.58);
  --card-bg-2: rgba(14, 16, 26, 0.5);
  --card-bg-3: rgba(18, 20, 32, 0.44);
  --card-bg-4: rgba(22, 24, 38, 0.38);

  --nav-bg-1: rgba(0, 0, 0, 0.88);
  --nav-bg-2: rgba(12, 12, 12, 0.82);

  --accent-tertiary: var(--brand-primary);
  --accent-danger: #FB7185;

  --text-primary: #FFFFFF;
  --text-secondary: #A3A3A3;
  --text-tertiary: #737373;

  --shadow-1: rgba(0, 0, 0, 0.55);
  --shadow-2: rgba(0, 0, 0, 0.38);
  --shadow-3: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --shadow-4: rgba(0, 0, 0, 0.22);

  --border-primary: color-mix(in srgb, var(--brand-primary) 18%, rgba(255, 255, 255, 0.1));
  --border-secondary: color-mix(in srgb, var(--brand-cyan) 12%, rgba(255, 255, 255, 0.06));
  --border-tertiary: rgba(255, 255, 255, 0.08);

  --fx-orb-1: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --fx-orb-2: color-mix(in srgb, var(--brand-cyan) 6%, transparent);
  --fx-grid: rgba(255, 255, 255, 0.04);
  --fx-grid-accent: color-mix(in srgb, var(--brand-cyan) 10%, transparent);
  --fx-grid-dot: color-mix(in srgb, var(--brand-primary) 22%, transparent);

  --accent-blue: var(--accent-primary);
  --accent-green: var(--accent-secondary);
  --accent-yellow: var(--accent-tertiary);
  --accent-red: var(--accent-danger);
  --accent-purple: var(--brand-rose);
  --border-color: var(--border-primary);
  --card-bg: var(--card-bg-1);
  --card-shadow: var(--shadow-2);
}

/* 亮色 — 青绿靛光底 + 语言点缀色 */
[data-theme="light"],
.theme-light {
  --brand-gradient: linear-gradient(135deg, var(--brand-indigo) 0%, var(--brand-live-teal) 50%, var(--brand-lime-bright) 100%);
  --brand-gradient-nav: linear-gradient(90deg, var(--brand-indigo) 0%, var(--brand-live-cyan) 52%, var(--brand-lime-bright) 100%);
  --brand-gradient-soft: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-lime-bright) 10%, transparent),
    color-mix(in srgb, var(--brand-live-cyan) 8%, transparent),
    color-mix(in srgb, var(--brand-indigo) 6%, transparent));

  --bg-primary: #F0F7F4;
  --bg-secondary: #E8F2ED;
  --bg-tertiary: #DFEBE5;
  --bg-base: #ECF4F0;

  --glass-surface: color-mix(in srgb, var(--brand-live-cyan) 10%, rgba(255, 255, 255, 0.58));
  --glass-surface-2: color-mix(in srgb, var(--brand-indigo) 8%, rgba(255, 255, 255, 0.52));
  --glass-border: color-mix(in srgb, var(--brand-live-teal) 12%, rgba(0, 0, 0, 0.06));
  --glass-border-bright: color-mix(in srgb, var(--brand-primary) 22%, rgba(0, 0, 0, 0.05));
  --glass-highlight: rgba(255, 255, 255, 0.72);
  --glass-edge: color-mix(in srgb, var(--brand-lime-bright) 16%, rgba(255, 255, 255, 0.82));

  --card-bg-1: color-mix(in srgb, var(--brand-live-cyan) 12%, rgba(255, 255, 255, 0.62));
  --card-bg-2: color-mix(in srgb, var(--brand-indigo) 9%, rgba(255, 255, 255, 0.56));
  --card-bg-3: color-mix(in srgb, var(--brand-live-teal) 10%, rgba(250, 252, 251, 0.54));
  --card-bg-4: color-mix(in srgb, var(--brand-cyan) 8%, rgba(245, 250, 248, 0.5));

  --nav-bg-1: color-mix(in srgb, var(--brand-live-cyan) 8%, rgba(255, 255, 255, 0.94));
  --nav-bg-2: color-mix(in srgb, var(--brand-indigo) 6%, rgba(255, 255, 255, 0.88));

  --accent-tertiary: var(--brand-lime-bright);
  --accent-danger: #E11D48;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #94A3B8;

  --shadow-1: color-mix(in srgb, var(--brand-live-teal) 16%, transparent);
  --shadow-2: color-mix(in srgb, var(--brand-indigo) 8%, rgba(15, 23, 42, 0.04));
  --shadow-3: color-mix(in srgb, var(--brand-indigo) 14%, transparent);
  --shadow-4: rgba(15, 23, 42, 0.035);

  --border-primary: color-mix(in srgb, var(--brand-primary) 22%, rgba(15, 23, 42, 0.05));
  --border-secondary: color-mix(in srgb, var(--brand-cyan) 16%, transparent);
  --border-tertiary: color-mix(in srgb, var(--brand-live-teal) 8%, rgba(15, 23, 42, 0.04));

  --fx-orb-1: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  --fx-orb-2: color-mix(in srgb, var(--brand-cyan) 12%, transparent);
  --fx-grid: color-mix(in srgb, var(--brand-indigo) 6%, transparent);
  --fx-grid-accent: color-mix(in srgb, var(--brand-live-teal) 14%, transparent);
  --fx-grid-dot: color-mix(in srgb, var(--brand-indigo) 22%, transparent);

  --accent-blue: var(--accent-primary);
  --accent-green: var(--accent-secondary);
  --accent-yellow: var(--accent-tertiary);
  --accent-red: var(--accent-danger);
  --accent-purple: var(--brand-rose);
  --border-color: var(--border-primary);
  --card-bg: var(--card-bg-1);
  --card-shadow: var(--shadow-2);
}