/* HEIFIT — generated from tokens.json */
:root, [data-theme="light"] {
  --surface-100: #f4f4f2; /* Page background of the whole app (member and admin zone). Text on it: ink, ink-muted. */
  --surface-200: #ffffff; /* Raised surfaces: cards, sheets, table rows, inputs. Text on it: ink, ink-muted, and the status inks. */
  --surface-300: #e9e9e6; /* Sunken or hovered areas: segmented-control track, progress track, selected row, skeletons. Text on it: ink, ink-muted. */
  --ground: #cccccc; /* The logo's own light-grey background. Use for hero panels, the date strip and the cover; never for small text. Text on it: ink only (not ink-muted). */
  --ink: #333333; /* Primary text and icons (the logo charcoal). On surface-100, surface-200, surface-300 and ground. */
  --ink-muted: #555555; /* Secondary text: captions, meta lines, helper text. On surface-100, surface-200, surface-300 only - not on ground. */
  --brand: #4340d2; /* The main brand colour (indigo). Fills for selected states: selected chip, selected day, active navigation item, selected segment and pack outline, indicator bars. Text on it: on-brand. Dark theme uses a lighter indigo so the fill stays 3:1 on surface-100 and surface-200. */
  --on-brand: #ffffff; /* Text and icons on brand fills. */
  --brand-pressed: #312ea6; /* Pressed and hover state of a brand fill. Text on it: on-brand. */
  --brand-ink: #4340d2; /* Indigo used as text, icons, links and focus colour on surface-100, surface-200, surface-300 and ground (4.5:1 in both themes). */
  --action: #f7b500; /* Fill of the primary call-to-action button (gold): Book, Pay, Save, Add activity. Text on it: on-action. Identify the button by its label; the gold fill alone is under 3:1 on light surfaces. */
  --on-action: #262626; /* Text and icons on action fills. */
  --action-pressed: #dba000; /* Hover and pressed state of the primary button. Text on it: on-action. */
  --full: #333333; /* Fill of the 'Full' badge and the filled capacity meter of a fully booked activity. Text on it: on-full. */
  --on-full: #ffffff; /* Text and icons on full fills. */
  --brand-gray: #a5a5a5; /* The logo's shading grey. Decorative only (illustration shading, cover); never text. */
  --border: #767676; /* Borders of interactive controls (inputs, outline buttons, checkboxes, chips). 3:1 on surface-100, surface-200 and surface-300. */
  --divider: #d9d9d6; /* Decorative hairlines between list rows and table rows. Never the only cue for a control's edge. */
  --focus: #4340d2; /* Focus ring (indigo), drawn 2px with a 2px gap of the surface colour so it also shows on fills. At least 3:1 on surface-100, surface-200, surface-300 and ground in both themes. */
  --success-bg: #e2f2e9; /* Background of 'paid', 'present' and 'spots left' badges. Text on it: success-ink. */
  --success-ink: #1b5e3f; /* Text and icon for success states on success-bg, surface-100 and surface-200. Always paired with a check icon or a word. */
  --success-solid: #1b5e3f; /* Fill of the selected 'Present' segment and the 'Mark as paid' button. Text on it: on-success-solid. */
  --on-success-solid: #ffffff; /* Text and icons on success-solid. */
  --danger-bg: #fde8e6; /* Background of 'absent', 'cancelled' and error banners. Text on it: danger-ink. */
  --danger-ink: #a8241b; /* Text and icon for danger states on danger-bg, surface-100 and surface-200. Always paired with an x icon or a word. */
  --danger-solid: #a8241b; /* Fill of the selected 'Absent' segment and destructive confirm buttons. Text on it: on-danger-solid. */
  --on-danger-solid: #ffffff; /* Text and icons on danger-solid. */
  --notice-bg: #ffe9d6; /* Background of the orange notice and warning: extra activity information members must act on, cash still to be collected, 'Wachtlijst' and 'Te betalen' badges. Kept apart from the gold button. Text on it: notice-ink. */
  --notice-ink: #7a3300; /* Text and icon on notice-bg and surface-200. */
  --notice-border: #b35400; /* 2px outline of the notice so it stands out from cards even without colour vision. 3:1 on notice-bg and surface-200. */
  --info-bg: #e3ecfb; /* Background of neutral information: order status 'Nieuw' and 'Afwachting betaling', info banners. Text on it: info-ink. Blue is only used for information that needs no action. */
  --info-ink: #1a4587; /* Text and icon on info-bg, surface-100 and surface-200 (7:1 in both themes). Always paired with a word. */
  --shadow-sm: 0 1px 2px rgba(51,51,51,0.10); /* Cards resting on surface-100. */
  --shadow-md: 0 6px 18px rgba(51,51,51,0.14); /* Sticky action bar and popovers. */
  --shadow-sheet: 0 -8px 28px rgba(51,51,51,0.18); /* Bottom sheet and dialog. */
}
[data-theme="dark"] {
  --surface-100: #1b1b1b;
  --surface-200: #252525;
  --surface-300: #303030;
  --ground: #3a3a3a;
  --ink: #f2f2f2;
  --ink-muted: #b8b8b8;
  --brand: #6461f0;
  --on-brand: #ffffff;
  --brand-pressed: #5350dc;
  --brand-ink: #b4b2ff;
  --action: #f7b500;
  --on-action: #1b1b1b;
  --action-pressed: #ffc933;
  --full: #f2f2f2;
  --on-full: #1b1b1b;
  --brand-gray: #8a8a8a;
  --border: #8c8c8c;
  --divider: #3a3a3a;
  --focus: #b4b2ff;
  --success-bg: #1f3a2c;
  --success-ink: #8fdcb0;
  --success-solid: #8fdcb0;
  --on-success-solid: #10241a;
  --danger-bg: #4a2522;
  --danger-ink: #ffb0a8;
  --danger-solid: #ffb0a8;
  --on-danger-solid: #3a1210;
  --notice-bg: #4a2a10;
  --notice-ink: #ffc48a;
  --notice-border: #d98a3d;
  --info-bg: #1e2f4d;
  --info-ink: #a8c5ff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.6);
  --shadow-sheet: 0 -8px 28px rgba(0,0,0,0.7);
}
:root {
  --space-1: 4px; /* Icon-to-label gap, badge inner padding. */
  --space-2: 8px; /* Gap between chips, inline controls. */
  --space-3: 12px; /* Padding inside compact rows and inputs. */
  --space-4: 16px; /* Page gutter on mobile, card padding. */
  --space-5: 24px; /* Gap between cards; page gutter on tablet. */
  --space-6: 32px; /* Section spacing; page gutter on desktop. */
  --space-7: 48px; /* Large section spacing on desktop. */
  --size-touch: 48px; /* Minimum height and width of every tappable control on touch screens. */
  --size-touch-dense: 40px; /* Control height inside the admin data table at 1024px and up (pointer devices only). */
  --content-max: 1200px; /* Maximum width of page content on desktop. */
  --radius-sm: 8px; /* Badges, small tags, table cell chips. */
  --radius-md: 14px; /* Buttons, inputs, list rows. */
  --radius-lg: 22px; /* Cards, sheets, notices. */
  --radius-pill: 999px; /* Chips, segmented control, date-strip days, avatars. */
  --bp-tablet: 640px; /* min-width: 640px - two-column grids, side sheet instead of bottom sheet. */
  --bp-desktop: 1024px; /* min-width: 1024px - left sidebar navigation, data table instead of member cards. */
  --bp-wide: 1440px; /* min-width: 1440px - content stops growing at content-max, extra whitespace on both sides. */
  --font-display: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-icons: "Material Icons";  /* HeiFit deviation from the design system's generated tokens.css: that file still names "Material Symbols Rounded" (the family the PREVIOUS version used), but the system's blazor.md and its own changelog switched to classic Material Icons, loaded via the <link> in App.razor. The family names must match or .hf-icon resolves to no font and every icon renders as literal ligature text. Report upstream so tokens.json is regenerated. */
  --text-display-xl: 400 56px/56px var(--font-display); /* Hero and marketing headline, desktop only. Uppercase, ink on surface or ground. */
  --text-display-lg: 400 40px/40px var(--font-display); /* Page title (h1) on mobile and tablet. */
  --text-display-md: 400 28px/30px var(--font-display); /* Day headings in the calendar, section titles, sheet titles. */
  --text-numeral: 400 44px/44px var(--font-display); /* Token counts and big stat numbers (token balance, pack size). */
  --text-title: 700 20px/26px var(--font-sans); /* Activity and card titles. */
  --text-body: 400 16px/24px var(--font-sans); /* Default copy and form inputs (16px stops iOS zoom on focus). */
  --text-body-strong: 600 16px/24px var(--font-sans); /* Member names, prices, button labels. */
  --text-body-sm: 400 14px/20px var(--font-sans); /* Meta lines, table cells, helper text. */
  --text-label: 700 12px/16px var(--font-sans); /* Badges, chip captions and table headers. Uppercase. */
  --text-caption: 500 12px/16px var(--font-sans); /* Footnotes such as the admin fee line. */
}
.display-xl {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 56px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-md {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.numeral {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 44px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}