:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --t-xs: 12.5px;
  --t-sm: 13.5px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 21px;
  --t-xl: 28px;
  --t-2xl: 38px;
  --t-3xl: clamp(38px, 6.2vw, 68px);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-9: 104px;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --maxw: 1180px;
  --nav-h: 62px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .16s;
  --dur-2: .34s;
  --dur-3: .7s;
}

html[data-theme="dark"] {
  --bg: #06070e;
  --bg-soft: #0a0c17;
  --bg-deep: #030409;

  --panel: rgba(16, 19, 34, .68);
  --panel-2: rgba(22, 26, 44, .72);
  --panel-solid: #101423;

  --line: rgba(122, 146, 220, .14);
  --line-2: rgba(122, 146, 220, .28);
  --line-3: rgba(122, 146, 220, .46);

  --ink: #e9edfb;
  --ink-2: #a3accb;
  --ink-3: #6c7796;
  --ink-4: #4b5470;

  --accent: #4fd6ff;
  --accent-2: #9b8cff;
  --accent-3: #3ee0b4;
  --accent-4: #ff86c8;
  --warn: #ffc061;
  --danger: #ff6b81;

  --grid-line: rgba(118, 150, 235, .055);
  --glow-1: rgba(79, 214, 255, .17);
  --glow-2: rgba(155, 140, 255, .15);
  --glow-3: rgba(62, 224, 180, .10);

  --shadow-1: 0 18px 44px -22px rgba(0, 0, 0, .8);
  --shadow-2: 0 30px 80px -30px rgba(0, 0, 0, .85);
  --code-bg: rgba(8, 11, 22, .85);
  --scrim: rgba(3, 4, 9, .72);

  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-soft: #ffffff;
  --bg-deep: #eceff7;

  --panel: rgba(255, 255, 255, .78);
  --panel-2: rgba(255, 255, 255, .92);
  --panel-solid: #ffffff;

  --line: rgba(38, 52, 96, .12);
  --line-2: rgba(38, 52, 96, .22);
  --line-3: rgba(38, 52, 96, .38);

  --ink: #101528;
  --ink-2: #4a5474;
  --ink-3: #75809e;
  --ink-4: #9aa3bd;

  --accent: #0b7fa8;
  --accent-2: #5a45d6;
  --accent-3: #0e8a67;
  --accent-4: #b83280;
  --warn: #9a6206;
  --danger: #c0303f;

  --grid-line: rgba(38, 52, 96, .05);
  --glow-1: rgba(79, 214, 255, .22);
  --glow-2: rgba(155, 140, 255, .20);
  --glow-3: rgba(62, 224, 180, .16);

  --shadow-1: 0 16px 40px -24px rgba(22, 32, 66, .35);
  --shadow-2: 0 30px 70px -34px rgba(22, 32, 66, .38);
  --code-bg: rgba(240, 243, 250, .95);
  --scrim: rgba(246, 247, 251, .75);

  color-scheme: light;
}