/* Design tokens shared by every EARTH surface: the private messenger and the
   public channels are two programs on two domains, and they should look like
   one product. Colours, radii, the monospace stack, safe areas and the tap
   size live here; each app brings its own layout on top. */

:root,
:root[data-theme='dark'] {
  --bg: #070810;
  --panel: #10131d;
  --panel-2: #171b27;
  --panel-3: #1f2432;
  --line: #242938;
  --text: #ecedf5;
  --muted: #8c91a8;
  --faint: #666b80;
  --accent: #8c6bff;
  --accent-soft: #221b44;
  --accent-ink: #ffffff;
  --teal: #2ad6c4;
  --teal-soft: #10322f;
  --danger: #ff6369;
  --ok: #2ad6c4;
  --warn: #f0a945;
  --bubble-in: #171b27;
  --bubble-out: #2a2160;
  --bubble-out-text: #ede9ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .6);
  --ground:
    radial-gradient(60% 50% at 15% 0%, rgba(140, 107, 255, .16), transparent 70%),
    radial-gradient(55% 45% at 95% 100%, rgba(42, 214, 196, .12), transparent 70%);
  color-scheme: dark;
}

:root[data-theme='light'] {
  --bg: #eef0f7;
  --panel: #ffffff;
  --panel-2: #f3f4fa;
  --panel-3: #e7e9f3;
  --line: #dfe1ee;
  --text: #14151f;
  --muted: #6c6f83;
  --faint: #9a9db0;
  --accent: #6d4aff;
  --accent-soft: #ede8ff;
  --accent-ink: #ffffff;
  --teal: #0fb3a3;
  --teal-soft: #ddf6f2;
  --danger: #e5484d;
  --ok: #0fb3a3;
  --warn: #d98218;
  --bubble-in: #ffffff;
  --bubble-out: #e8e3ff;
  --bubble-out-text: #1e1440;
  --shadow: 0 1px 2px rgba(20, 21, 31, .06), 0 8px 24px rgba(20, 21, 31, .06);
  --shadow-lg: 0 24px 60px rgba(20, 21, 31, .18);
  --ground:
    radial-gradient(60% 50% at 15% 0%, rgba(109, 74, 255, .10), transparent 70%),
    radial-gradient(55% 45% at 95% 100%, rgba(15, 179, 163, .10), transparent 70%);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #eef0f7;
    --panel: #ffffff;
    --panel-2: #f3f4fa;
    --panel-3: #e7e9f3;
    --line: #dfe1ee;
    --text: #14151f;
    --muted: #6c6f83;
    --faint: #9a9db0;
    --accent: #6d4aff;
    --accent-soft: #ede8ff;
    --accent-ink: #ffffff;
    --teal: #0fb3a3;
    --teal-soft: #ddf6f2;
    --danger: #e5484d;
    --ok: #0fb3a3;
    --warn: #d98218;
    --bubble-in: #ffffff;
    --bubble-out: #e8e3ff;
    --bubble-out-text: #1e1440;
    --shadow: 0 1px 2px rgba(20, 21, 31, .06), 0 8px 24px rgba(20, 21, 31, .06);
    --shadow-lg: 0 24px 60px rgba(20, 21, 31, .18);
    --ground:
      radial-gradient(60% 50% at 15% 0%, rgba(109, 74, 255, .10), transparent 70%),
      radial-gradient(55% 45% at 95% 100%, rgba(15, 179, 163, .10), transparent 70%);
    color-scheme: light;
  }
}

:root {
  --radius: 14px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tap: 44px; /* comfortable touch target */
}