/* ============================================================
   星冕 VR3D — Design Tokens & Themes
   按设计方案：Light / Dark / System 三态
   ============================================================ */

:root {
  /* Fonts */
  --font-sans: "Inter", "Helvetica Neue", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono",
    Menlo, monospace;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Shadows (dark-first, tuned per theme) */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, .10);
  --shadow-3: 0 30px 90px rgba(0, 0, 0, .22);
  --glow-accent: 0 0 24px rgba(124, 108, 255, .35);
  --glow-cyan: 0 0 18px rgba(80, 220, 255, .35);

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: .45s;

  /* VR3D spatial layers */
  --perspective: 1400px;
  --card-depth: 60px;

  /* Grid line theme */
  --grid-line: rgba(255, 255, 255, .05);

  /* 3D scene shared */
  --vr-bg-1: #05060a;
  --vr-bg-2: #0a0c14;
}

/* ---------- Dark (default) ---------- */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0B0B0D;
  --bg-soft: #101014;
  --bg-elev: #151518;
  --card: #151518;
  --card-2: #1b1b20;

  --text: #FFFFFF;
  --text-2: #a6a6ae;
  --text-3: #6d6d78;

  --border: #29292D;
  --border-soft: #1e1e23;

  --accent: #FFFFFF;
  --accent-text: #0B0B0D;

  /* futuristic accents (used sparingly on VR elements) */
  --neon: #8B7CFF;
  --neon-2: #54E1FF;
  --neon-3: #FF6EC7;
  --neon-grad: linear-gradient(120deg, #54E1FF 0%, #8B7CFF 50%, #FF6EC7 100%);

  --glass-bg: rgba(21, 21, 24, .55);
  --glass-bg-strong: rgba(21, 21, 24, .78);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-highlight: rgba(255, 255, 255, .06);

  --shadow-1: 0 2px 10px rgba(0, 0, 0, .4);
  --shadow-2: 0 16px 48px rgba(0, 0, 0, .5);
  --shadow-3: 0 40px 120px rgba(0, 0, 0, .6);

  --grid-line: rgba(255, 255, 255, .045);
  --grid-line-bright: rgba(139, 124, 255, .14);

  --code-bg: #0e0e13;
  --inline-code-bg: rgba(139, 124, 255, .12);
  --selection: rgba(139, 124, 255, .32);

  --overlay: rgba(5, 6, 10, .6);
  --scrollbar: #2a2a31;
}

/* ---------- Light ---------- */
html[data-theme="light"] {
  color-scheme: light;

  --bg: #F7F7F5;
  --bg-soft: #eef0ef;
  --bg-elev: #ffffff;
  --card: #FFFFFF;
  --card-2: #f2f3f2;

  --text: #111111;
  --text-2: #55555c;
  --text-3: #8a8a92;

  --border: #E5E5E5;
  --border-soft: #eceeec;

  --accent: #111111;
  --accent-text: #ffffff;

  --neon: #5B4FE0;
  --neon-2: #0E9BD8;
  --neon-3: #D63C9E;
  --neon-grad: linear-gradient(120deg, #0E9BD8 0%, #5B4FE0 55%, #D63C9E 100%);

  --glass-bg: rgba(255, 255, 255, .6);
  --glass-bg-strong: rgba(255, 255, 255, .85);
  --glass-border: rgba(17, 17, 17, .08);
  --glass-highlight: rgba(255, 255, 255, .7);

  --shadow-1: 0 2px 8px rgba(20, 20, 30, .05);
  --shadow-2: 0 16px 48px rgba(20, 20, 30, .10);
  --shadow-3: 0 40px 110px rgba(20, 20, 30, .16);

  --grid-line: rgba(17, 17, 17, .05);
  --grid-line-bright: rgba(91, 79, 224, .16);

  --code-bg: #f0f1f4;
  --inline-code-bg: rgba(91, 79, 224, .10);
  --selection: rgba(91, 79, 224, .18);

  --overlay: rgba(240, 241, 244, .55);
  --scrollbar: #d3d5d8;
}

/* ---------- Base surface ---------- */
html {
  background: var(--bg);
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
  background: transparent; /* 背景由 html / .vr-backdrop 提供，星空粒子需在 body 之上 */
  transition: background-color .5s var(--ease), color .5s var(--ease);
}

::selection { background: var(--selection); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 8px;
  border: 2px solid var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}