/* ==========================================================================
   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 */
  /* Unbounded (display) + Geologica (text) + Martian Mono (labels, terminal, accents).
     All three cover Latin and Cyrillic; Chinese falls back to system CJK fonts. */
  --font-sans: "Geologica", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
    "Microsoft YaHei", sans-serif;
  --font-display: "Unbounded", "Geologica", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
    "Microsoft YaHei", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "PingFang SC", "Noto Sans SC", monospace;

  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --fs-xl: clamp(1.5rem, 1.05rem + 1.6vw, 2.5rem);
  --fs-display: clamp(2.2rem, 0.9rem + 4.3vw, 5rem);
  --fs-huge: clamp(1.4rem, 0.4rem + 3.8vw, 3.9rem);

  --tracking-tight: -0.035em;
  --tracking-label: 0.12em;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(96px, 13vw, 176px);
  --topbar-h: 56px;

  /* Shape */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --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-3: 700ms;
  --dur-4: 1100ms;

  /* Constant accents (same in both themes) */
  --status: #3ddc84;
  --glow-rgb: 124, 134, 255;
}

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

  --bg: #08080a;
  --bg-elev: #111114;
  --panel: #0f0f12;
  --panel-2: #16161a;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-faint: #5f5f69;

  --btn-bg: #f4f4f5;
  --btn-fg: #0a0a0b;

  --nav-bg: rgba(18, 18, 21, 0.62);
  --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;
  --grain-opacity: 0.05;

  /* 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;
  --screen-skeleton: rgba(255, 255, 255, 0.06);
}

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

  --bg: #f4f4f1;
  --bg-elev: #ffffff;
  --panel: #ebebe7;
  --panel-2: #e2e2de;
  --line: rgba(12, 12, 14, 0.08);
  --line-strong: rgba(12, 12, 14, 0.16);

  --text: #0c0c0e;
  --text-muted: #5c5c63;
  --text-faint: #9b9ba2;

  --btn-bg: #0c0c0e;
  --btn-fg: #f4f4f1;

  --nav-bg: rgba(250, 250, 248, 0.7);
  --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;
  --grain-opacity: 0.035;

  /* 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;
  --screen-skeleton: rgba(0, 0, 0, 0.06);
}

/* Chinese reads better without wide letter-spacing or tight leading. */
:root:lang(zh) {
  --tracking-tight: -0.01em;
  --tracking-label: 0.04em;
}