/*
 * earth-now.co — apps/web/app/globals.css
 * Tailwind layers + theme tokens. LIGHT theme is the default; dark is an explicit
 * toggle ([data-theme="dark"]). Values from the validated reference palette.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --line: #e1e0d9;
  --border: rgba(11, 11, 11, 0.1);
  --accent: #2a78d6;
  --accent-wash: rgba(42, 120, 214, 0.07);
  --good: #006300;
  --warn: #fab219;
  --critical: #d03b3b;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --line: #2c2c2a;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #3987e5;
  --accent-wash: rgba(57, 135, 229, 0.12);
  --good: #0ca30c;
  --warn: #fab219;
  --critical: #d03b3b;
}

body {
  background-color: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* Faint planetary wash at the top of the page — light and dark variants via tokens. */
  background-image: radial-gradient(90rem 28rem at 50% -6rem, var(--accent-wash), transparent 70%);
  background-repeat: no-repeat;
}

/* Pulsing "live" indicator — honesty rule: only rendered on counters the tier
   system classified as visibly ticking. Static under prefers-reduced-motion. */
.live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--accent);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--accent-wash);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px var(--accent-wash);
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* Ticking digits never shift horizontally (functional, not decorative:
   a proportional-figure ticker would jitter as digits change). */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection {
  background-color: var(--accent-wash);
}