/* ==========================================================================
   WWW — design tokens
   --------------------------------------------------------------------------
   The look of the logo and the X cover: every screen is a browser window.
   Sky-blue page with a faint dot dither, white windows with a chunky navy
   frame and a hard offset shadow, blue title bars with the three traffic-light
   dots, pixel headings (Silkscreen), Space Grotesk for text, JetBrains Mono for
   addresses and numbers. Flat colour only: no gradients, no blur shadows.
   ========================================================================== */

:root,
[data-theme="light"] {
  --bg: #a6c4e4;
  --dot: #8fb1da;
  --panel: #d6e5f6;
  --panel-2: #c4d9f0;
  --panel-3: #b1cbe7;
  --line: #96b4d9;
  --line-2: #7599c9;
  --frame: #0c1a55;
  --shadow: #0c1a55;
  --titlebar: #2a55f0;
  --titlebar-2: #1436b4;

  --ink: #0c1a55;
  --ink-2: #1e2f7a;
  --muted: #46588f;
  --faint: #5a6da6;

  --accent: #2a55f0;
  --accent-hover: #4a72ff;
  --accent-press: #1436b4;
  --accent-soft: rgba(42, 85, 240, 0.12);
  --accent-text: #1436b4;
  --on-accent: #ffffff;
  --sun: #ffd23f;
  --sun-d: #b88a0b;

  --up: #12a150;
  --down: #d93636;
  --down-soft: rgba(217, 54, 54, 0.1);
  --up-soft: rgba(18, 161, 80, 0.12);

  /* the interactive globe: blue sea, green land, gold for owned countries */
  --globe-sphere: #3d86e6;
  --globe-line: #0c1a55;
  --globe-land: #57b449;
  --globe-owned: #ffd23f;
  --globe-hover: rgba(255, 255, 255, 0.55);
  --globe-pick: #ff9f43;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0b1533;
  --dot: #15265a;
  --panel: #12204a;
  --panel-2: #182a5e;
  --panel-3: #21377a;
  --line: #27407f;
  --line-2: #3a58a8;
  --frame: #4a6cc4;
  --shadow: #040918;
  --titlebar: #2a55f0;
  --titlebar-2: #1a2f7a;

  --ink: #eaf5ff;
  --ink-2: #cfe0fb;
  --muted: #9bb1e0;
  --faint: #7088bb;

  --accent: #5a80ff;
  --accent-hover: #7f9dff;
  --accent-press: #4468e8;
  --accent-soft: rgba(90, 128, 255, 0.2);
  --accent-text: #a9c0ff;
  --on-accent: #ffffff;
  --sun: #ffd23f;
  --sun-d: #b88a0b;

  --up: #2fd07a;
  --down: #ff7a7a;
  --down-soft: rgba(255, 122, 122, 0.14);
  --up-soft: rgba(47, 208, 122, 0.14);

  --globe-sphere: #2a55c0;
  --globe-line: #060d24;
  --globe-land: #3fa04a;
  --globe-owned: #ffd23f;
  --globe-hover: rgba(255, 255, 255, 0.45);
  --globe-pick: #ff9f43;

  color-scheme: dark;
}

:root {
  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Silkscreen", "Space Grotesk", ui-monospace, monospace;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 12px;
  --pill: 999px;

  --side-w: 264px;
  --side-rail: 76px;
  --top-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}