:root {
  --brand-blue: #4269d0;
  --brand-green: #3ca951;
  --brand-coral: #ff725c;
  --brand-violet: #a463f2;
  --brand-gold: #efb118;
  --brand-mint: #6cc5b0;
  --brand-grad: linear-gradient(120deg, #4269d0 0%, #6cc5b0 54%, #3ca951 100%);

  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, ui-monospace, monospace;

  --page: #070a12;
  --page-rgb: 7, 10, 18;
  --surface: rgba(12, 18, 30, 0.78);
  --surface-strong: #0d1422;
  --surface-soft: rgba(255, 255, 255, 0.045);
  --text-1: #eff6ff;
  --text-2: #b6c3d3;
  --text-3: #7f91a5;
  --text-4: #586b80;
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --grid-line: rgba(255, 255, 255, 0.06);
  --mode-accent: #6cc5b0;
  --mode-accent-2: #4269d0;
  --hero-image: url("/assets/media/chartscape-dashboard.webp");
  --hero-position: 66% 45%;
  --hero-overlay:
    linear-gradient(90deg, rgba(7, 10, 18, 0.96) 0%, rgba(7, 10, 18, 0.78) 38%, rgba(7, 10, 18, 0.38) 72%, rgba(7, 10, 18, 0.62) 100%),
    linear-gradient(180deg, rgba(7, 10, 18, 0.46) 0%, rgba(7, 10, 18, 0.86) 100%);

  --container: 1240px;
  --container-narrow: 960px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --fs-display: clamp(3.3rem, 7.6vw, 7.2rem);
  --fs-h1: clamp(2.25rem, 4.2vw, 4rem);
  --fs-h2: clamp(1.65rem, 2.6vw, 2.6rem);
  --fs-h3: clamp(1.1rem, 1.4vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.78rem;

  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 34px 90px rgba(0, 0, 0, 0.36);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-mode="dashboard"] {
  --page: #070a12;
  --page-rgb: 7, 10, 18;
  --surface: rgba(12, 18, 30, 0.78);
  --surface-strong: #0d1422;
  --surface-soft: rgba(255, 255, 255, 0.045);
  --text-1: #eff6ff;
  --text-2: #b6c3d3;
  --text-3: #7f91a5;
  --text-4: #586b80;
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --grid-line: rgba(255, 255, 255, 0.06);
  --mode-accent: #6cc5b0;
  --mode-accent-2: #4269d0;
  --hero-image: url("/assets/media/chartscape-dashboard.webp");
  --hero-position: 66% 45%;
  --hero-overlay:
    linear-gradient(90deg, rgba(7, 10, 18, 0.96) 0%, rgba(7, 10, 18, 0.78) 38%, rgba(7, 10, 18, 0.38) 72%, rgba(7, 10, 18, 0.62) 100%),
    linear-gradient(180deg, rgba(7, 10, 18, 0.46) 0%, rgba(7, 10, 18, 0.86) 100%);
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 34px 90px rgba(0, 0, 0, 0.36);
}

body[data-mode="academic"] {
  --page: #f5f1e8;
  --page-rgb: 245, 241, 232;
  --surface: rgba(255, 252, 245, 0.82);
  --surface-strong: #fffaf0;
  --surface-soft: rgba(20, 20, 20, 0.045);
  --text-1: #171717;
  --text-2: #3f403c;
  --text-3: #74736d;
  --text-4: #9b978d;
  --hairline: rgba(20, 20, 20, 0.12);
  --hairline-strong: rgba(20, 20, 20, 0.2);
  --grid-line: rgba(20, 20, 20, 0.065);
  --mode-accent: #4269d0;
  --mode-accent-2: #3ca951;
  --hero-image: url("/assets/media/academic-editorial.webp");
  --hero-position: 70% 48%;
  --hero-overlay:
    linear-gradient(90deg, rgba(245, 241, 232, 0.98) 0%, rgba(245, 241, 232, 0.84) 42%, rgba(245, 241, 232, 0.42) 76%, rgba(245, 241, 232, 0.8) 100%),
    linear-gradient(180deg, rgba(245, 241, 232, 0.2) 0%, rgba(245, 241, 232, 0.92) 100%);
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 80px rgba(51, 43, 30, 0.18);
}

[data-theme="modern"] {
  --t-page: #fafbfc;
  --t-chart: #ffffff;
  --t-grid: #ededf0;
  --t-border: #e0e2e6;
  --t-text-1: #1a1a1a;
  --t-text-2: #5a5a5a;
  --t-text-3: #6e6e6e;
}

[data-theme="analytics"] {
  --t-page: #f7f8fa;
  --t-chart: #ffffff;
  --t-grid: #eaeaec;
  --t-border: #d5d5d8;
  --t-text-1: #1a1a1a;
  --t-text-2: #5a5a5a;
  --t-text-3: #707070;
}

[data-theme="dashboard"] {
  --t-page: #0a1119;
  --t-chart: #0f1923;
  --t-grid: #1a2a3a;
  --t-border: #1e3040;
  --t-text-1: #e8edf2;
  --t-text-2: #8899aa;
  --t-text-3: #6b7d8e;
}

[data-theme="academic"] {
  --t-page: #ffffff;
  --t-chart: #ffffff;
  --t-grid: #e8e8e8;
  --t-border: #cccccc;
  --t-text-1: #000000;
  --t-text-2: #444444;
  --t-text-3: #666666;
}