/* ============================================================
   Fake GPS — design tokens
   Apple-inspired. Deep emerald green. Dark default + light.
   ============================================================ */
:root {
  color-scheme: dark;
  /* brand greens (from the app's teleport gradient) */
  --green: #00e0a0;
  --green-2: #00b57e;
  --green-3: #00a877;
  --green-ghost: rgba(0, 224, 160, 0.13);
  --green-line: rgba(0, 224, 160, 0.28);

  /* dark theme surfaces */
  --bg: #04100b;
  --bg-elev: #081d15;
  --hero-grad-1: #0b3022;
  --hero-grad-2: #051310;
  --text: #ecf4f0;
  --text-2: #b6c7bf;
  --muted: #82978d;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-3: rgba(255, 255, 255, 0.10);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.17);
  --card-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  --glow: 0 30px 90px -24px rgba(0, 224, 160, 0.42);
  --grid-line: rgba(255, 255, 255, 0.025);
  --star: #ffc83d;
  --btn-fg: #fff;
  --store-bg: #ffffff;
  --store-fg: #000000;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;

  --maxw: 1160px;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 11px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
  color-scheme: light;
  --green: #00b57e;
  --green-2: #009e6c;
  --green-3: #008a5e;
  --green-ghost: rgba(0, 181, 126, 0.10);
  --green-line: rgba(0, 181, 126, 0.30);

  --bg: #f5f8f6;
  --bg-elev: #ffffff;
  --hero-grad-1: #d4f1e4;
  --hero-grad-2: #eef6f2;
  --text: #0a1712;
  --text-2: #3f504a;
  --muted: #6c7c75;
  --surface: rgba(8, 30, 22, 0.025);
  --surface-2: rgba(8, 30, 22, 0.05);
  --surface-3: rgba(8, 30, 22, 0.08);
  --border: rgba(8, 30, 22, 0.10);
  --border-strong: rgba(8, 30, 22, 0.16);
  --card-shadow: 0 24px 50px -28px rgba(7, 40, 28, 0.30);
  --glow: 0 30px 80px -28px rgba(0, 181, 126, 0.40);
  --grid-line: rgba(7, 40, 28, 0.05);
  --star: #f5a623;
  --btn-fg: #fff;
  --store-bg: #0a1712;
  --store-fg: #ffffff;
}