/* CELLA - generated from tokens.json */
:root, [data-theme="light"] {
  --bone: #fbfaf7;
  --bone-2: #f3efe6;
  --bone-3: #eae8e1;
  --white: #ffffff;
  --ink: #332e30;
  --ink-2: #484545;
  --ink-3: #6b6567;
  --ink-4: #a8a3a4;
  --green: #1a3025;
  --green-dark: #0f1e17;
  --sage-100: #9bb6a3;
  --sage-300: #6e8f7b;
  --earth: #5e4b3f;
  --sky-100: #c1ddf8;
  --sky-300: #89a4bd;
  --blue-500: #3a5775;
  --blue-900: #193857;
  --mist: var(--bone-3);
  --mist-2: #dcd8ce;
  --green-tint: var(--bone-3);
  --gold: #bea669;
  --gold-print: #b79d63;
  --gold-dark: #75592a;
  --gold-light: #e8d7a8;
  --human: #50748a;
  --human-light: #d7e3ef;
  --hest: #5b705e;
  --hest-light: #d7ddd6;
  --hund: var(--earth);
  --hund-light: #eae3dc;
  --cat-aminosyrer: #e7cd7f;
  --cat-modstandskraft: #f5a874;
  --cat-miljo: #c65258;
  --cat-antioxidanter: #ecc6cd;
  --cat-elektrisk: #a28ea8;
  --cat-vitaminer: #97a985;
  --cat-mineraler: #7392ae;
  --surface-page: var(--bone);
  --surface-card: var(--white);
  --surface-panel: var(--mist);
  --surface-inverse: var(--green);
  --surface-report: var(--bone-2);
  --text-primary: var(--ink);
  --text-muted: var(--ink-2);
  --text-subtle: var(--ink-3);
  --text-on-inverse: var(--bone);
  --text-brand: var(--green);
  --border: rgba(51,46,48,0.12);
  --border-strong: rgba(51,46,48,0.28);
  --action-primary: var(--green);
  --action-primary-hover: var(--green-dark);
  --focus-ring: var(--green);
  --world-accent: var(--green);
  --world-accent-light: var(--bone-3);
  --status-ok: var(--green);
  --status-low: var(--gold-dark);
  --status-attention: #a8424a;
  --shadow-none: none;
  --shadow-raise: 0 1px 2px rgba(51,46,48,0.06), 0 8px 24px -12px rgba(51,46,48,0.18);
}
:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 144px;
  --container: 1200px;
  --container-narrow: 720px;
  --control-h: 48px;
  --control-h-sm: 36px;
  --border-w: 1px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-cell: 50%;
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Inter", "Helvetica Neue", Arial, sans-serif;
}
.display { font-family: var(--font-serif); font-size: 72px; line-height: 1.08; font-weight: 400; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-serif); font-size: 52px; line-height: 1.12; font-weight: 400; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-serif); font-size: 36px; line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-serif); font-size: 24px; line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; }
.h4 { font-family: var(--font-serif); font-size: 20px; line-height: 1.2; font-weight: 400; }
.lead { font-family: var(--font-sans); font-size: 19px; line-height: 1.55; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 1.2; font-weight: 500; letter-spacing: 0.14em; }
.button { font-family: var(--font-sans); font-size: 15px; line-height: 1; font-weight: 500; letter-spacing: 0.005em; }
.price { font-family: var(--font-mono); font-size: 20px; line-height: 1.2; font-weight: 400; font-variant-numeric: tabular-nums; }
.value { font-family: var(--font-mono); font-size: 15px; line-height: 1.2; font-weight: 400; font-variant-numeric: tabular-nums; }
.stamp { font-family: var(--font-mono); font-size: 12px; line-height: 1.2; font-weight: 400; font-variant-numeric: tabular-nums; }