/* ==========================================================================
   Solheure — design tokens
   Single source of truth for color, type, spacing and radius. Nothing in
   here renders anything by itself — components.css and app.css consume
   these variables. Kept deliberately small: a calm, utilitarian palette,
   not a color system for a product line.
   ========================================================================== */
:root{
  /* --- Color: surfaces --- */
  --ink: #12162B;         /* page background */
  --surface: #1C2140;     /* card background */
  --surface-2: #262C52;   /* nested/inset surface (inputs, chips, panels) */
  --line: rgba(242,239,230,0.12);

  /* --- Color: text --- */
  --text: #F2EFE6;
  --text-dim: #B9BAD1;

  /* --- Color: accents (meaning, not decoration) --- */
  --gold: #F5B942;        /* production / primary action / money gained */
  --gold-dim: rgba(245,185,66,0.16);
  --teal: #5FC7C0;        /* consumption */
  --teal-dim: rgba(95,199,192,0.14);
  --red: #E0796F;         /* grid draw / warnings */
  --red-dim: rgba(224,121,111,0.16);
  --violet: #8B8FD9;      /* battery */
  --violet-dim: rgba(139,143,217,0.16);

  /* --- Typography --- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 0.92rem;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.5rem;
  --text-hero: 3.2rem;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* --- Radius --- */
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-pill: 99px;

  /* --- Motion --- */
  --ease: .15s ease;
}