/* Shared design tokens for public/pilot-facing pages (home, pilot login,
   pilot stats, pilot-connected). Light-first by deliberate brand choice —
   dark is available via the toggle, not via prefers-color-scheme, so the
   product's default identity is always light regardless of OS setting. */

:root {
  --bg:            #fafafa;
  --surface:       #ffffff;
  --surface2:      #f4f4f5;
  --border:        #e4e4e7;
  --text:          #18181b;
  --muted:         #6b6b73;
  --accent:        #6366f1;
  --accent-hover:  #4f46e5;
  --accent-tint:   #eef2ff;
  --bullish:       #00c896;
  --bullish-text:  #047857;
  --bullish-tint:  #ecfdf5;
  --bearish:       #ff4d6d;
  --bearish-text:  #be123c;
  --bearish-tint:  #fef2f2;
  --radius:        12px;
  --radius-lg:     18px;
  --tap:           48px;
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --shadow-sm:     0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-md:     0 4px 16px rgba(24, 24, 27, 0.06);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            #0a0a0a;
  --surface:       #141414;
  --surface2:      #1c1c1c;
  --border:        #2a2a2a;
  --text:          #e5e5e5;
  --muted:         #8a8a8a;
  --accent:        #6366f1;
  --accent-hover:  #818cf8;
  --accent-tint:   rgba(99, 102, 241, 0.14);
  --bullish:       #00c896;
  --bullish-text:  #00c896;
  --bullish-tint:  rgba(0, 200, 150, 0.14);
  --bearish:       #ff4d6d;
  --bearish-text:  #ff4d6d;
  --bearish-tint:  rgba(255, 77, 109, 0.14);
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  cursor: pointer; transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }