/* Anumi shared tokens + base. Imported by the landing and the /vote/
   client so both surfaces look like the mobile app (Material 3, violet
   #6750A4 seed). Mobile-app source of truth: esc_app/lib/theme/tokens.dart.

   Light scheme only for now - the app does have a dark scheme, but we
   default both web surfaces to light to keep the visual identity stable
   for first-time users arriving from a QR code. */
:root {
  color-scheme: light;
  --brand: #6750A4;
  --brand-container: #EADDFF;
  --on-brand: #ffffff;
  --on-brand-container: #21005D;
  --surface: #fffbfe;
  --surface-container: #f3edf7;
  --surface-container-high: #ece6f0;
  --on-surface: #1c1b1f;
  --on-surface-variant: #49454f;
  --outline-variant: #cac4d0;
  --tertiary: #7d5260;
  --tertiary-container: #ffd8e4;
  --on-tertiary-container: #31111d;
  --error: #b3261e;
  --error-container: #f9dedc;
  --on-error-container: #410e0b;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Spacing scale - mirrors AnumiTokens.space* */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
}

.anumi-brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.anumi-brand {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -1px;
  color: var(--brand);
  text-decoration: none;
}

.anumi-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-16) var(--space-48);
}