/* ============================================================================
   Atlas — design tokens

   Source: .claude/agents/design-tokens.json. If a value changes there, it changes here.

   ⚠️ No component writes a hex color: they all go through these variables. A value
   hand-written inside a component does not follow the theme, and the defect is only
   visible to whoever uses dark mode.
   ============================================================================ */

:root {
  /* Brand */
  --brand:        #055951;
  --brand-light:  #17a688;
  --brand-dark:   #0d5951;

  /* Semantic */
  --success: #17a688;
  --warning: #f4991a;
  --error:   #e93e3f;

  /* Surfaces and text — light theme, the default one */
  --bg-primary:    #f8fafa;
  --bg-secondary:  #ffffff;
  --bg-card:       #ffffff;
  --bg-hover:      #f0f4f5;
  --text-primary:  #092328;
  --text-secondary: #5a6c70;
  --border:        #e1e8e9;
  --shadow:        rgba(9, 35, 40, 0.08);

  /* ⚠️ The map borders are NOT --border: that one is a border over a light background,
     and on the map it would land on colored countries and vanish there. This needs a
     gray that shows up both on the gray of the countries with no data and on the green
     of the full ones. */
  --map-border:    #999999;

  /* Spacing — multiples of 4 only */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Elevation */
  --elevation-card:       0 4px 12px var(--shadow);
  --elevation-card-hover: 0 8px 20px var(--shadow);
  --elevation-header:     0 2px 8px var(--shadow);

  /* Typography — system stack: no webfont to load, no third-party request. In line
     with the product's privacy-first positioning. */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;

  --motion-duration: 0.3s;
  --motion-easing: ease;
}

[data-theme="dark"] {
  --bg-primary:    #0a0f10;
  --bg-secondary:  #13191b;
  --bg-card:       #1a2225;
  --bg-hover:      #2a3438;
  --text-primary:  #e4e7e8;
  --text-secondary: #a0a8ab;
  --border:        #2a3438;
  --shadow:        rgba(0, 0, 0, 0.3);
  --map-border:    #6b7578;
}

/* Anyone who has not picked a theme follows the system. ⚠️ The [data-theme] guard is
   there because an explicit choice of the light theme has to beat the system
   preference, not lose to it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:    #0a0f10;
    --bg-secondary:  #13191b;
    --bg-card:       #1a2225;
    --bg-hover:      #2a3438;
    --text-primary:  #e4e7e8;
    --text-secondary: #a0a8ab;
    --border:        #2a3438;
    --shadow:        rgba(0, 0, 0, 0.3);
    --map-border:    #6b7578;
  }
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

body {
  font-family: var(--font-family);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* ⚠️ Whoever asked for less motion does not get it. This is not a courtesy: for some
   people motion brings on nausea or a migraine. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 🔴 The focus outline gets replaced, never removed: without it the page becomes
   impossible to use with the keyboard alone, and nobody notices because with a mouse
   everything works. */
:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 2px;
}