/**
 * Axinomica brand — early load before React bundle (prevents theme flash).
 * Full tokens also in axinomica-brand.css (webpack bundle).
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

:root,
[data-axinomica-theme='dark'] {
  --highlight: 194 100% 50%;
  --background: 228 40% 7%;
  --foreground: 225 32% 93%;
  --card: 228 28% 14%;
  --primary: 214 100% 55%;
  --primary-foreground: 225 32% 93%;
  --muted: 228 28% 14%;
  --muted-foreground: 216 28% 64%;
  --border: 228 20% 22%;
  --radius: 0.625rem;
  --axinomica-radius-button: 0.625rem;
  --axinomica-radius-card: 0.875rem;
}

[data-axinomica-theme='light'] {
  --highlight: 214 100% 58%;
  --background: 220 33% 97%;
  --foreground: 228 33% 10%;
  --card: 0 0% 100%;
  --primary: 214 100% 55%;
  --primary-foreground: 0 0% 100%;
  --muted: 214 100% 95%;
  --muted-foreground: 216 20% 45%;
  --border: 216 28% 84%;
}

[data-axinomica-theme='bw'] {
  --highlight: 0 0% 20%;
  --background: 0 0% 95%;
  --foreground: 0 0% 0%;
  --card: 0 0% 100%;
  --primary: 0 0% 20%;
  --primary-foreground: 0 0% 100%;
  --muted: 0 0% 90%;
  --muted-foreground: 0 0% 40%;
  --border: 0 0% 80%;
}

html {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}