@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/atkinson-hyperlegible-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/atkinson-hyperlegible-bold.woff2') format('woff2');
}

:root {
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --bg: #f5f6f1;
  --bg-elevated: #fbfaf6;
  --bg-help: #eaf1ec;
  --text: #23291f;
  --text-secondary: #5b6259;
  --border: #dde1d6;

  --primary: #3d6b57;
  --primary-strong: #2e5443;
  --on-primary: #f5f6f1;

  --accent: #e2a33b;
  --accent-soft: #f6dfb0;
  --on-accent: #23291f;

  --warn: #b85c38;
  --warn-soft: #f3ddd2;

  --focus-ring: #2e5443;
  --shadow: 0 6px 20px rgba(35, 41, 31, 0.10);

  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --touch-min: 48px;

  --companion-maga: #3d6b57;
  --companion-chicho: #a1703f;
  --companion-barro: #b3572c;
  --companion-lenga: #4f7a5e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #171c18;
    --bg-elevated: #1f2620;
    --bg-help: #1b2420;
    --text: #edeae1;
    --text-secondary: #b7bdb0;
    --border: #313b32;

    --primary: #6fa98c;
    --primary-strong: #8cc1a6;
    --on-primary: #121a15;

    --accent: #e8b563;
    --accent-soft: #3a331f;
    --on-accent: #171c18;

    --warn: #d99574;
    --warn-soft: #3a2820;

    --focus-ring: #8cc1a6;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);

    --companion-maga: #6fa98c;
    --companion-chicho: #c99a68;
    --companion-barro: #d1815a;
    --companion-lenga: #7fae8f;
  }
}

:root[data-theme='dark'] {
  --bg: #171c18;
  --bg-elevated: #1f2620;
  --bg-help: #1b2420;
  --text: #edeae1;
  --text-secondary: #b7bdb0;
  --border: #313b32;

  --primary: #6fa98c;
  --primary-strong: #8cc1a6;
  --on-primary: #121a15;

  --accent: #e8b563;
  --accent-soft: #3a331f;
  --on-accent: #171c18;

  --warn: #d99574;
  --warn-soft: #3a2820;

  --focus-ring: #8cc1a6;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);

  --companion-maga: #6fa98c;
  --companion-chicho: #c99a68;
  --companion-barro: #d1815a;
  --companion-lenga: #7fae8f;
}