/* Membrana — generated from tokens.json */
:root, [data-theme="light"] {
  --ground: #f2f0e9; /* Page background. Paper for the landing page, Night for the signed-in app and for product UI shown on the landing page. */
  --surface: #fbfaf6; /* Objects that sit on ground: the month object, the stake, rows inside the app. */
  --surface-raised: #ffffff; /* The rules card and the notice. One step above surface. */
  --line: #d9d6cb; /* Decorative hairlines and dividers only. Never the only edge of a control. */
  --line-strong: #85827a; /* Control borders, day ticks, unknown-check rings, FAQ rules. 3:1 on ground, surface and surface-raised. */
  --ink: #2b2d31; /* All headlines and body text on ground, surface and surface-raised. Also the today marker. */
  --ink-muted: #5b5e64; /* Secondary text and labels on ground, surface and surface-raised. Also the neutral mark for a test that isn't clean. */
  --accent: #ff7a1a; /* The one accent, as a FILL only: the button, the selected stake, the clean mark on Night. Never text on Paper. On Paper it always carries ink text or an ink edge. */
  --on-accent: #2b2d31; /* Text and icons on accent. */
  --accent-ink: #a84300; /* The accent as text or a thin mark on ground and surface: the second line of a statement, 'stake kept', the due ring. */
  --accent-edge: var(--ink); /* Border and pressed-edge of the primary button and the selected stake chip. Ink on Paper so the orange fill has a 3:1 edge; disappears into the fill on Night. */
  --clean-fill: var(--ink); /* Fill of a clean check and a clean day bar. Ink on Paper, orange on Night. */
  --clean-mark: var(--accent); /* The tick inside a clean check, on clean-fill. */
  --focus-ring: #2b2d31; /* 2px solid focus ring, 3px offset, on every surface. */
  --error: #a8203a; /* Real failures only (camera, upload, card, offline): a 2px outline, a mark and a label, never a fill. */
}
[data-theme="dark"] {
  --ground: #26282c;
  --surface: #2e3035;
  --surface-raised: #373a40;
  --line: #44474d;
  --line-strong: #7d828a;
  --ink: #f2f0e9;
  --ink-muted: #b0b3b8;
  --accent: #ff7a1a;
  --on-accent: #2b2d31;
  --accent-ink: #ff7a1a;
  --accent-edge: var(--accent);
  --clean-fill: var(--accent);
  --clean-mark: var(--on-accent);
  --focus-ring: #ff7a1a;
  --error: #ff8fa3;
}
:root {
  --space-1: 4px; /* Label to value. */
  --space-2: 8px; /* Gap between check slots and chips. */
  --space-3: 12px; /* Icon to text. */
  --space-4: 16px; /* Phone gutter, row padding. */
  --space-6: 24px; /* Gap inside an object. */
  --space-8: 32px; /* Object padding on desktop. */
  --space-12: 48px; /* Headline to content. */
  --space-16: 64px; /* Column gap; section padding on phone. */
  --space-24: 96px; /* Hero bottom padding. */
  --space-32: 128px; /* Section padding on desktop. */
  --radius-sm: 6px; /* Day bars, small marks. */
  --radius-md: 14px; /* Rows, the notice, objects on phone. */
  --radius-lg: 28px; /* Objects on desktop: month, stake, rules. */
  --radius-pill: 999px; /* The button, chips, tags, check slots. */
  --font-sans: "Familjen Grotesk", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --text-display-xl: 700 144px/0.9 var(--font-sans); /* The hero headline only. 60px on phone. */
  --text-display-l: 700 96px/0.94 var(--font-sans); /* One statement per section. 48px on phone. */
  --text-display-m: 700 64px/0.98 var(--font-sans); /* Section headlines. 40px on phone. */
  --text-title: 600 28px/1.15 var(--font-sans); /* FAQ questions, card titles. */
  --text-lead: 400 24px/1.35 var(--font-sans); /* The one line under a headline. 20px on phone. */
  --text-body: 400 18px/1.5 var(--font-sans); /* Running text. 16px inside the app. */
  --text-small: 400 14px/1.45 var(--font-sans); /* The open-state line, footnotes. */
  --text-figure: 500 144px/0.9 var(--font-mono); /* The stake amount, the countdown, the rules figures. Tabular numerals. */
  --text-label: 500 12px/1.3 var(--font-mono); /* Uppercase labels above a value. Never a sentence. */
}
.display-xl {
  font-family: var(--font-sans);
  font-size: 144px;
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.045em;
}
.display-l {
  font-family: var(--font-sans);
  font-size: 96px;
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.display-m {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.title {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.lead {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.body {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.figure {
  font-family: var(--font-mono);
  font-size: 144px;
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.08em;
}