/**
 * 悠悠草 YouYouCao — Design Tokens
 * Default: LIGHT（干净浅色）· Optional: DARK（纯粹深色）
 *
 * 浅色 = 明白底 + 清晰灰阶；深色 = 近黑底 + 霓虹高亮。互不混浊。
 *
 * Brand moments (rainbow ONLY):
 * Logo / Hero brand title / Paid Gradient CTA / .gradient-rule
 */

:root {
  /* ========== Brand Spectrum (logo) ========== */
  --brand-magenta: #ff2d8a;
  --brand-orchid: #c77dff;
  --brand-cyan: #2ee6ff;
  --brand-mint: #5dffc3;
  --brand-lime: #b8f04a;
  --brand-gold: #ffc53d;

  --brand-gradient: linear-gradient(
    90deg,
    var(--brand-magenta) 0%,
    var(--brand-orchid) 20%,
    var(--brand-cyan) 40%,
    var(--brand-mint) 60%,
    var(--brand-lime) 80%,
    var(--brand-gold) 100%
  );

  --brand-gradient-soft: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand-magenta) 45%, transparent) 0%,
    color-mix(in srgb, var(--brand-cyan) 35%, transparent) 50%,
    color-mix(in srgb, var(--brand-gold) 40%, transparent) 100%
  );

  /* ========== LIGHT (default) — 干净浅色 ========== */
  --color-primary: #1f8f7e;
  --color-primary-hover: #187a6c;
  --color-primary-pressed: #13665a;
  --color-primary-muted: color-mix(in srgb, var(--color-primary) 12%, transparent);
  --color-primary-border: color-mix(in srgb, var(--color-primary) 30%, transparent);

  --color-accent: #c2186a;
  --color-accent-hover: #a31459;
  --color-accent-muted: color-mix(in srgb, var(--color-accent) 10%, transparent);

  --color-warm: #c4921a;
  --color-warm-muted: color-mix(in srgb, var(--color-warm) 12%, transparent);

  /* 浅色表面：白系，层次清晰，不发灰绿 */
  --bg-void: #f0f2f5;
  --bg-base: #f7f8fa;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-overlay: #ffffff;
  --bg-hover: #eef0f3;
  --bg-sunken: #e8ebef;

  --bg-tint-cyan: #f0faf8;
  --bg-tint-magenta: #fdf2f7;
  --bg-tint-gold: #fdf8ef;

  --text-primary: #0f1317;
  --text-secondary: #3d4752;
  --text-tertiary: #5c6670;
  --text-disabled: #9aa3ad;
  --text-inverse: #f7f8fa;
  --text-on-primary: #ffffff;
  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-hover);
  --text-brand-fallback: #14181c;

  --border-subtle: rgba(20, 24, 28, 0.08);
  --border-default: rgba(20, 24, 28, 0.12);
  --border-strong: rgba(20, 24, 28, 0.2);
  --border-focus: var(--color-primary);

  --color-success: #1f8f7e;
  --color-success-bg: color-mix(in srgb, var(--color-success) 10%, transparent);
  --color-warning: #c47a0a;
  --color-warning-bg: color-mix(in srgb, var(--color-warning) 10%, transparent);
  --color-error: #d12b45;
  --color-error-bg: color-mix(in srgb, var(--color-error) 10%, transparent);
  --color-info: #1784a0;
  --color-info-bg: color-mix(in srgb, var(--color-info) 10%, transparent);

  /* 浅色光谱（用于品牌字，略降饱和） */
  --brand-magenta: #d64d8f;
  --brand-orchid: #9b6bc9;
  --brand-cyan: #2bb8c9;
  --brand-mint: #3cb89a;
  --brand-lime: #8fb83a;
  --brand-gold: #c9a227;

  /* HD 多层阴影：接触影 + 中距 + 环境，边缘更利 */
  --shadow-sm:
    0 1px 0 #fff inset,
    0 0 0 0.5px rgba(20, 24, 28, 0.04),
    0 1px 2px rgba(20, 24, 28, 0.06),
    0 2px 6px rgba(20, 24, 28, 0.04);
  --shadow-md:
    0 1px 0 #fff inset,
    0 0 0 0.5px rgba(20, 24, 28, 0.05),
    0 2px 4px rgba(20, 24, 28, 0.05),
    0 8px 18px rgba(20, 24, 28, 0.07),
    0 18px 40px rgba(20, 24, 28, 0.05);
  --shadow-lg:
    0 1px 0 #fff inset,
    0 0 0 0.5px rgba(20, 24, 28, 0.06),
    0 4px 8px rgba(20, 24, 28, 0.05),
    0 14px 28px rgba(20, 24, 28, 0.08),
    0 32px 64px rgba(20, 24, 28, 0.07);
  --shadow-xl:
    0 1px 0 #fff inset,
    0 0 0 0.5px rgba(20, 24, 28, 0.06),
    0 6px 12px rgba(20, 24, 28, 0.06),
    0 20px 40px rgba(20, 24, 28, 0.09),
    0 48px 96px rgba(20, 24, 28, 0.1);
  --shadow-float:
    0 1px 0 #fff inset,
    0 0 0 1px rgba(20, 24, 28, 0.08),
    0 8px 16px rgba(20, 24, 28, 0.06),
    0 24px 48px rgba(20, 24, 28, 0.1),
    0 40px 80px rgba(20, 24, 28, 0.08);

  --depth-0: none;
  --depth-1: var(--shadow-sm);
  --depth-2: var(--shadow-md);
  --depth-3: var(--shadow-lg);
  --depth-4: var(--shadow-xl);
  --depth-5: var(--shadow-float);

  --glow-primary: 0 0 0 3px var(--color-primary-muted);
  --glow-accent: 0 0 0 2px color-mix(in srgb, var(--color-accent) 16%, transparent);
  --glow-brand: 0 8px 28px color-mix(in srgb, var(--color-primary) 14%, transparent);

  --highlight-edge: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.55) 18%, transparent 55%);
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(20, 24, 28, 0.1);
  --metal-sheen:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.2) 12%, transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, transparent 42%);
  --mesh-tech: radial-gradient(rgba(20, 24, 28, 0.07) 0.65px, transparent 0.75px);

  /* ========== Type ========== */
  --text-micro: 0.75rem;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-h3: 1.25rem;
  --text-h2: 1.5rem;
  --text-h1: 2rem;
  --text-hero: clamp(2.5rem, 6vw, 4.5rem);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-brand: 500;

  --text-xs: var(--text-micro);
  --text-sm: var(--text-small);
  --text-md: var(--text-body);
  --text-lg: var(--text-h3);
  --text-xl: var(--text-h3);
  --text-2xl: var(--text-h2);
  --text-3xl: 1.875rem;
  --text-4xl: var(--text-h1);
  --text-5xl: 3rem;

  --font-brand: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --font-display: "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --tracking-tight: -0.02em;
  --tracking-brand: 0.08em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --radius-control: var(--radius-md);
  --radius-panel: var(--radius-lg);
  --radius-logo-chip: 6px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 400ms;

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --nav-height: 64px;
  --sidebar-width: 260px;

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

/* ========== DARK — 纯粹深色 ========== */
[data-theme="dark"] {
  --brand-magenta: #ff2d8a;
  --brand-orchid: #c77dff;
  --brand-cyan: #2ee6ff;
  --brand-mint: #5dffc3;
  --brand-lime: #b8f04a;
  --brand-gold: #ffc53d;

  --brand-gradient: linear-gradient(
    90deg,
    var(--brand-magenta) 0%,
    var(--brand-orchid) 20%,
    var(--brand-cyan) 40%,
    var(--brand-mint) 60%,
    var(--brand-lime) 80%,
    var(--brand-gold) 100%
  );

  --color-primary: #3de8c8;
  --color-primary-hover: #5dffc3;
  --color-primary-pressed: #22c9ab;
  --color-primary-muted: color-mix(in srgb, var(--color-primary) 16%, transparent);
  --color-primary-border: color-mix(in srgb, var(--color-primary) 40%, transparent);

  --color-accent: #ff2d8a;
  --color-accent-hover: #ff5aa3;
  --color-accent-muted: color-mix(in srgb, var(--color-accent) 14%, transparent);

  --color-warm: #ffc53d;
  --color-warm-muted: color-mix(in srgb, var(--color-warm) 14%, transparent);

  --bg-void: #000000;
  --bg-base: #07080a;
  --bg-surface: #0e1014;
  --bg-elevated: #14171c;
  --bg-overlay: #1b1f26;
  --bg-hover: #22262e;
  --bg-sunken: #050607;

  --bg-tint-cyan: color-mix(in srgb, var(--brand-cyan) 6%, var(--bg-surface));
  --bg-tint-magenta: color-mix(in srgb, var(--brand-magenta) 6%, var(--bg-surface));
  --bg-tint-gold: color-mix(in srgb, var(--brand-gold) 5%, var(--bg-surface));

  --text-primary: #f4f6f8;
  --text-secondary: #a8b0bc;
  --text-tertiary: #8e9aa8;
  --text-disabled: #454b55;
  --text-inverse: #07080a;
  --text-on-primary: #041510;
  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-hover);
  --text-brand-fallback: #f4f6f8;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-focus: var(--color-primary);

  --color-success: #5dffc3;
  --color-success-bg: color-mix(in srgb, var(--color-success) 12%, transparent);
  --color-warning: #f5a623;
  --color-warning-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
  --color-error: #ff4d6d;
  --color-error-bg: color-mix(in srgb, var(--color-error) 12%, transparent);
  --color-info: #2ee6ff;
  --color-info-bg: color-mix(in srgb, var(--color-info) 12%, transparent);

  --shadow-sm:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 0.5px rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 0 0 0.5px rgba(255, 255, 255, 0.05),
    0 4px 10px rgba(0, 0, 0, 0.45),
    0 14px 32px rgba(0, 0, 0, 0.55);
  --shadow-lg:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 0.5px rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.5),
    0 28px 56px rgba(0, 0, 0, 0.65);
  --shadow-xl:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 0 0 0.5px rgba(255, 255, 255, 0.07),
    0 12px 24px rgba(0, 0, 0, 0.55),
    0 40px 88px rgba(0, 0, 0, 0.72);
  --shadow-float:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 16px 32px rgba(0, 0, 0, 0.55),
    0 36px 72px rgba(0, 0, 0, 0.65),
    0 0 48px color-mix(in srgb, var(--color-primary) 14%, transparent);

  --depth-1: var(--shadow-sm);
  --depth-2: var(--shadow-md);
  --depth-3: var(--shadow-lg);
  --depth-4: var(--shadow-xl);
  --depth-5: var(--shadow-float);

  --glow-primary:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent),
    0 0 28px color-mix(in srgb, var(--color-primary) 28%, transparent);
  --glow-accent:
    0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent),
    0 0 28px color-mix(in srgb, var(--color-accent) 22%, transparent);
  --glow-brand:
    0 0 40px color-mix(in srgb, var(--brand-cyan) 18%, transparent);

  --highlight-edge: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 55%);
  --glass-bg: rgba(14, 16, 20, 0.82);
  --glass-border: rgba(255, 255, 255, 0.12);
  --metal-sheen:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 14%, transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 44%, color-mix(in srgb, var(--color-primary) 7%, transparent) 100%);
  --mesh-tech: radial-gradient(rgba(255, 255, 255, 0.045) 0.7px, transparent 0.8px);
}

/* aliases */
[data-theme="light"] {
  /* :root already light — keep for explicit attribute sync */
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}


/* ============================================================
   兼容桥接层（Hub Server 旧变量名 → 官方 token）
   既有视图沿用 --primary / --text / --card / --line 等旧名，
   在此统一指向官方 token，便于逐步迁移、避免一次性破坏。
   data-theme 挂在 <html>（即 :root）上，var() 在本元素求值，
   因此深色覆盖对桥接变量同样生效。
   ============================================================ */
:root {
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --accent: var(--color-accent);
  --warm: var(--color-warm);
  --warning: var(--color-warning);
  --success: var(--color-success);
  --error: var(--color-error);

  --void: var(--bg-void);
  --base: var(--bg-base);
  --card: var(--bg-surface);
  --elevated: var(--bg-elevated);
  --overlay: var(--bg-overlay);
  --hover: var(--bg-hover);
  --sunken: var(--bg-sunken);

  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-tertiary);

  --line: var(--border-default);
  --line-soft: var(--border-subtle);
  --line-strong: var(--border-strong);

  /* 注意：官方 --depth-5 即 var(--shadow-float)，此处不得反向定义，否则循环 */
  --shadow: var(--depth-2);
  --shadow-hover: var(--depth-3);

  --font-sans: var(--font-body);
  --font-serif: var(--font-display);

  --ease: var(--ease-out);
  --ease-io: var(--ease-in-out);

  --max: var(--container-xl);
  --pad-x: clamp(20px, 4vw, 40px);
  --nav-h: var(--nav-height);
  --glow-soft: 0 0 0 3px var(--color-primary-muted);
}