/* Lundeby Lysbord — generated from tokens.json */
:root, [data-theme="light"] {
  --white: #ffffff;
  --Black: #000000;
  --Teal: #57b1e0;
  --Blue: #009ad1;
  --Navy: #1a679e;
  --surface: #f4f7fa;
  --surface-raised: #ffffff;
  --surface-sunken: #eaf0f5;
  --surface-hover: #eef3f7;
  --ink: #10202c;
  --ink-muted: #4a5b68;
  --ink-subtle: #5a6a77;
  --line: #d9e1e8;
  --line-strong: #7d8e9b;
  --primary: var(--Navy);
  --primary-hover: #155685;
  --on-primary: var(--white);
  --accent: var(--Blue);
  --accent-soft: #e3f2fa;
  --accent-ink: var(--Navy);
  --focus-ring: var(--Navy);
  --success: #0b7a75;
  --success-soft: #e3f4f2;
  --warning: #8a5200;
  --warning-soft: #fdf3e1;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --on-danger: #ffffff;
  --scrim: rgba(16, 32, 44, 0.48);
  --small-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  --medium-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  --large-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] {
  --surface: #0e161d;
  --surface-raised: #16212b;
  --surface-sunken: #0a1015;
  --surface-hover: #1c2935;
  --ink: #e8eef3;
  --ink-muted: #a3b3c0;
  --ink-subtle: #8a9bab;
  --line: #24313c;
  --line-strong: #5d6f7e;
  --primary: var(--Teal);
  --primary-hover: #7cc3e8;
  --on-primary: #0b1a24;
  --accent: var(--Blue);
  --accent-soft: #0f2c3d;
  --accent-ink: #8fd0f0;
  --focus-ring: var(--Teal);
  --success: #4fc1b4;
  --success-soft: #0d2a28;
  --warning: #f0b35a;
  --warning-soft: #2e2210;
  --danger: #ff8a7a;
  --danger-soft: #33191a;
  --on-danger: #1a0b0a;
  --scrim: rgba(0, 0, 0, 0.6);
  --small-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  --medium-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  --large-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --Standard-Spacing: 16px;
  --element-spacing: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-spacing: 64px;
  --radius-xs: 4px;
  --small-radius: 8px;
  --medium-radius: 12px;
  --large-radius: 16px;
  --radius-pill: 999px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --topbar-height: 56px;
  --bottomnav-height: 64px;
  --sidebar-width: 248px;
  --content-max: 1440px;
  --font-inter: 'Inter', sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-H1: 600 36px/1.5 var(--font-inter);
  --text-Display: 600 44px/1.5 var(--font-inter);
  --text-H2: 600 30px/1.5 var(--font-inter);
  --text-H3: 600 24px/1.5 var(--font-inter);
  --text-H4: 600 20px/1.5 var(--font-inter);
  --text-Ingress: 430 18px/1.5 var(--font-inter);
  --text-Body: 430 16px/1.5 var(--font-inter);
  --text-BodySmall: 430 14px/1.5 var(--font-inter);
  --text-Button: 600 15px/1.5 var(--font-inter);
  --text-Navigation: 500 14px/1.5 var(--font-inter);
  --text-Caption: 500 12px/1.5 var(--font-inter);
  --text-Price: 600 24px/1.5 var(--font-inter);
  --text-Label: 500 13px/18px var(--font-inter);
  --text-Overline: 600 11px/16px var(--font-inter);
  --text-Code: 450 13px/20px var(--font-mono);
}
.H1 {
  font-family: var(--font-inter);
  font-size: 36px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}
.Display {
  font-family: var(--font-inter);
  font-size: 44px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}
.H2 {
  font-family: var(--font-inter);
  font-size: 30px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}
.H3 {
  font-family: var(--font-inter);
  font-size: 24px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}
.H4 {
  font-family: var(--font-inter);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}
.Ingress {
  font-family: var(--font-inter);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 430;
  letter-spacing: 0;
}
.Body {
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 430;
  letter-spacing: 0;
}
.BodySmall {
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 430;
  letter-spacing: 0;
}
.Button {
  font-family: var(--font-inter);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}
.Navigation {
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
}
.Caption {
  font-family: var(--font-inter);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
}
.Price {
  font-family: var(--font-inter);
  font-size: 24px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}
.Label {
  font-family: var(--font-inter);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.Overline {
  font-family: var(--font-inter);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.Code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 450;
  letter-spacing: 0;
}