/* ============================================================
   XINSIDE design tokens
   Dark "Обсерватория сознания" base + optional light theme.
   All colour/space/type decisions live here.
   ============================================================ */

:root {
  /* Typography */
  --font-hand: "Caveat", "Space Grotesk", system-ui, cursive;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Hand-drawn button outline (irregular corners) */
  --r-hand: 255px 15px 225px 15px / 15px 225px 15px 255px;

  /* Type scale (fluid) */
  --fs-display: clamp(44px, 7vw, 92px);
  --fs-h1: clamp(28px, 4.4vw, 44px);
  --fs-h2: clamp(22px, 3vw, 30px);
  --fs-lead: clamp(17px, 2.1vw, 21px);
  --fs-body: 16.5px;
  --fs-mono: 12px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 14px;
  --sp-4: 22px;
  --sp-5: 34px;
  --sp-6: 52px;
  --sp-7: 80px;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.35s;

  /* Layout */
  --shell: min(1080px, 100%);
  --measure: 68ch;
}

/* -------- Dark (default) -------- */
:root,
[data-theme="dark"] {
  --bg: #070b16;
  --bg-2: #0e1430;
  --bg-3: #050813;

  --surface: rgba(12, 18, 34, 0.62);
  --surface-strong: rgba(10, 15, 28, 0.82);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.66);
  --muted-2: rgba(255, 255, 255, 0.46);

  --quantum: #8cc8ff;          /* cold accent — observation */
  --quantum-soft: rgba(140, 200, 255, 0.14);
  --bond: #f0b37e;             /* warm accent — merged universes */

  --glow: rgba(150, 200, 255, 0.22);
  --grid-line: rgba(255, 255, 255, 0.04);
  --star: rgba(248, 245, 238, 0.82); /* faintly warm, pencil-white */

  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* -------- Light (opt-in) -------- */
[data-theme="light"] {
  --bg: #f5f1ea;
  --bg-2: #ece4d6;
  --bg-3: #fbf8f2;

  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.9);
  --border: rgba(24, 28, 40, 0.12);
  --border-strong: rgba(24, 28, 40, 0.20);

  --text: #1b2130;
  --muted: rgba(27, 33, 48, 0.72);
  --muted-2: rgba(27, 33, 48, 0.5);

  --quantum: #2f6fb0;
  --quantum-soft: rgba(47, 111, 176, 0.12);
  --bond: #bd6f34;

  --glow: rgba(47, 111, 176, 0.18);
  --grid-line: rgba(24, 28, 40, 0.05);
  --star: rgba(47, 111, 176, 0.35);

  --shadow: 0 22px 60px rgba(40, 44, 60, 0.16);
  color-scheme: light;
}