/* ==========================================================================
   Design tokens
   Every color, size and timing used by the site lives here.
   Dark is the default theme; light is opt-in via [data-theme="light"].
   ========================================================================== */

:root {
  /* Typography */
  /* Only two families on the whole site: Rubik (titles) and Roboto (text, labels, accents).
     Both cover Latin and Cyrillic; neither has Chinese glyphs, so Chinese uses the system font. */
  --font-sans: "Roboto", sans-serif;
  --font-display: "Rubik", sans-serif;

  --fs-s: 0.875rem;
  --fs-m: 1rem;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 9vw, 128px);
  --topbar-h: 80px;

  /* Shape */
  --radius-s: 10px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-4: 1100ms;

  /* Constant accents (same in both themes) */
  --glow-rgb: 124, 134, 255;
  /* Hero name gradient of the VitePress docs home page. */
  --hero-gradient: linear-gradient(120deg, #bd34fe 30%, #41d1ff);
}

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

  /* Colors of VitePress's default theme (the Vue.js docs), dark mode:
     --vp-c-bg, --vp-c-bg-elv, --vp-c-bg-soft, --vp-c-default-soft, --vp-c-text-1/2/3,
     --vp-c-brand-1/2/3, --vp-c-brand-soft and the alt button colors. */
  --bg: #1b1b1f;
  --bg-elev: #202127;
  --panel: #202127;
  --line: rgba(101, 117, 133, 0.16);

  --text: #dfdfd6;
  --text-muted: #98989f;
  --text-faint: #6a6a71;

  --brand-1: #a8b1ff;
  --brand-2: #5c73e7;
  --brand-3: #3e63dd;
  --brand-soft: rgba(100, 108, 255, 0.16);

  --button-alt-bg: #32363f;
  --button-alt-hover: #414853;

  --nav-bg: rgba(27, 27, 31, 0.72);
  --nav-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.8);
  --menu-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);

  --skeleton: rgba(255, 255, 255, 0.055);
  --skeleton-hi: rgba(255, 255, 255, 0.11);

  --glow-strength: 0.22;

  /* Laptop mockup: space-black finish */
  --device-shell: linear-gradient(180deg, #2c2c31 0%, #1a1a1d 100%);
  --device-edge: rgba(255, 255, 255, 0.12);
  --device-base-top: #3b3b41;
  --device-base-mid: #232327;
  --device-base-bottom: #0e0e10;
  --device-groove: #141416;
  --device-shadow: rgba(0, 0, 0, 0.75);
  --device-lift: 0 3cqw 7cqw -2cqw rgba(0, 0, 0, 0.7);

  /* Screen chrome (the miniature browser / app inside the laptop) */
  --chrome-bg: #18181b;
  --chrome-line: rgba(255, 255, 255, 0.06);
  --chrome-dot: #3a3a41;
  --chrome-url-bg: rgba(255, 255, 255, 0.06);
  --chrome-text: rgba(255, 255, 255, 0.55);
  --screen-bg: #0c0c0f;
}

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

  /* VitePress default theme, light mode. */
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --panel: #f6f6f7;
  --line: rgba(142, 150, 170, 0.14);

  --text: #3c3c43;
  --text-muted: #67676c;
  --text-faint: #929295;

  --brand-1: #3451b2;
  --brand-2: #3a5ccc;
  --brand-3: #5672cd;
  --brand-soft: rgba(100, 108, 255, 0.14);

  --button-alt-bg: #ebebef;
  --button-alt-hover: #e4e4e9;

  --nav-bg: rgba(255, 255, 255, 0.72);
  --nav-shadow: 0 12px 32px -20px rgba(20, 20, 40, 0.25);
  --menu-shadow: 0 24px 60px -28px rgba(20, 20, 40, 0.35);

  --skeleton: rgba(12, 12, 14, 0.06);
  --skeleton-hi: rgba(12, 12, 14, 0.1);

  --glow-strength: 0.18;

  /* Laptop mockup: silver finish */
  --device-shell: linear-gradient(180deg, #e9e9ec 0%, #cdcdd2 100%);
  --device-edge: rgba(0, 0, 0, 0.1);
  --device-base-top: #f3f3f5;
  --device-base-mid: #d6d6db;
  --device-base-bottom: #a7a7ae;
  --device-groove: #c2c2c8;
  --device-shadow: rgba(30, 30, 50, 0.35);
  --device-lift: 0 3cqw 7cqw -3cqw rgba(30, 30, 50, 0.35);

  --chrome-bg: #f1f1f3;
  --chrome-line: rgba(0, 0, 0, 0.07);
  --chrome-dot: #d0d0d5;
  --chrome-url-bg: rgba(0, 0, 0, 0.05);
  --chrome-text: rgba(0, 0, 0, 0.5);
  --screen-bg: #fafafa;
}