/* ============================================================================
   Membria token layer (docs/01-product/ux/design-system.md, chapter 3)

   This file is the ONLY place where colour values (hex, rgb) appear. Components and layouts use
   var(--mb-*) tokens only; Radzen components get the same tokens through the --rz-* variables
   (section 4). Load order (App.razor):
   Radzen standard-base.css  ->  membria-tokens.css  ->  membria-base.css  ->  Membria.Web.styles.css

   Contents
     1. Typeface: Inter (variable, self-hosted, no external request; the @font-face lives in App.razor)
     2. Colour tokens: light (:root), dark (system preference + manual choice)
     3. Non-colour tokens: space, shape, typography, sizes
     4. Radzen mapping: palette, semantic variables, components

   Theme selection: <html data-theme="light|dark|system"> (the server renders it from the membria.theme
   cookie, without a flash); with "system" the prefers-color-scheme media query decides.
   ============================================================================ */


/* ---------- 1. Typeface -------------------------------------------------- */

/* The Inter @font-face is in the <head> of App.razor (inline) so that the preload and the font request use the same
   fingerprinted URL. Inter 4.001 variable font (opsz 14–32, wght 100–900), SIL OFL; licence: ../fonts/Inter-LICENSE.txt.
   Full Latin and Latin Extended-A coverage: ő/ű/Ő/Ű are included. Family name: "Inter" (see --mb-font below). */


/* ---------- 2. Colour tokens ------------------------------------------------ */

/* Light theme: the default. */
:root {
  color-scheme: light;

  /* Brand and state colours (design-system 3.1; the -soft variants come from the reference screens) */
  --mb-primary: #2456D6;
  --mb-primary-strong: #1B44AD;
  --mb-primary-soft: #E8EEFF;
  --mb-accent: #1DA463;
  --mb-accent-soft: #E4F6EC;
  --mb-warning: #D98B0E;
  --mb-warning-soft: #FFF4E0;
  --mb-danger: #D23B3B;
  --mb-danger-soft: #FDE8E8;
  --mb-info: #2C8CC9;
  --mb-info-soft: #E6F3FB;

  /* Surfaces and text */
  --mb-bg: #F7F8FB;
  --mb-surface: #FFFFFF;
  --mb-surface-2: #F0F2F7;
  --mb-border: #E3E6EE;
  --mb-text: #161A22;
  --mb-text-2: #5A6274;
  --mb-text-3: #8A91A3;

  /* Additional tokens (F3.2): for WCAG 2.2 AA contrast and the Radzen palette */
  --mb-text-strong: #0B0E14;          /* headings, emphasis */
  --mb-border-strong: #CDD2DF;        /* stronger separators, hover */
  --mb-border-control: #8A91A3;       /* border of input fields: 3:1 against the surface (WCAG 1.4.11) */
  --mb-accent-text: #167B4A;          /* state text: >= 4.5:1 on the surface and on the -soft background */
  --mb-warning-text: #96600A;
  --mb-danger-text: #C82E2E;
  --mb-info-text: #2472A3;
  --mb-on-primary: #FFFFFF;           /* label on a filled (primary, accent, ...) background */
  --mb-on-accent: #0B0E14;
  --mb-on-warning: #0B0E14;
  --mb-on-danger: #FFFFFF;
  --mb-on-info: #0B0E14;

  /* Depth and layers */
  --mb-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  --mb-shadow-float: 0 12px 32px rgba(16, 24, 40, 0.12);
  --mb-scrim: rgba(16, 24, 40, 0.45);
  --mb-hover-overlay: rgba(0, 0, 0, 0.18);   /* filled button hover: darkens (light), lightens (dark) */

  /* Sport-profile colour: decorative elements only (club dot, card edge), never a carrier of meaning */
  --mb-sport: #1F8A4C;

  /* QR code (authenticator setup, F3.3): dark modules on white in BOTH themes, because not every scanner reads an
     inverted code; the dark blocks repeat the same values on purpose. */
  --mb-qr-dark: #0B0E14;
  --mb-qr-light: #FFFFFF;

  /* Chart series (S1.12): six hues that keep >= 3:1 against the surface and the page (WCAG 1.4.11) and differ in hue
     and lightness; a chart never tells its series by colour alone (a label and a marker shape go with it). */
  --mb-series-1: #2456D6;
  --mb-series-2: #C2410C;
  --mb-series-3: #0F766E;
  --mb-series-4: #7C3AED;
  --mb-series-5: #BE185D;
  --mb-series-6: #4D7C0F;
}

/* Dark theme: its own palette, not an inversion (design-system 3.1). Two blocks with identical content:
   the system preference (unless the user chose light) and the manual choice.
   NOTE: change both together; ThemeTokensTests checks that they match. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --mb-primary: #6B8FFF;
    --mb-primary-strong: #8EAAFF;
    --mb-primary-soft: #1C2A52;
    --mb-accent: #4ED39A;
    --mb-accent-soft: #14301F;
    --mb-warning: #F2B547;
    --mb-warning-soft: #3A2A0E;
    --mb-danger: #FF7A7A;
    --mb-danger-soft: #3D1A1A;
    --mb-info: #6CC0F0;
    --mb-info-soft: #13293A;

    --mb-bg: #0F1218;
    --mb-surface: #171B23;
    --mb-surface-2: #1F2430;
    --mb-border: #2A3040;
    --mb-text: #EDEFF4;
    --mb-text-2: #A3ABBD;
    --mb-text-3: #6F7788;

    --mb-text-strong: #FFFFFF;
    --mb-border-strong: #3A4358;
    --mb-border-control: #6F7788;
    --mb-accent-text: #4ED39A;
    --mb-warning-text: #F2B547;
    --mb-danger-text: #FF7A7A;
    --mb-info-text: #6CC0F0;
    --mb-on-primary: #0B0E14;
    --mb-on-accent: #0B0E14;
    --mb-on-warning: #0B0E14;
    --mb-on-danger: #0B0E14;
    --mb-on-info: #0B0E14;

    --mb-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --mb-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --mb-scrim: rgba(0, 0, 0, 0.6);
    --mb-hover-overlay: rgba(255, 255, 255, 0.16);

    --mb-sport: #3FB574;

    --mb-qr-dark: #0B0E14;
    --mb-qr-light: #FFFFFF;

    --mb-series-1: #6B8FFF;
    --mb-series-2: #FB923C;
    --mb-series-3: #2DD4BF;
    --mb-series-4: #A78BFA;
    --mb-series-5: #F472B6;
    --mb-series-6: #A3E635;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --mb-primary: #6B8FFF;
  --mb-primary-strong: #8EAAFF;
  --mb-primary-soft: #1C2A52;
  --mb-accent: #4ED39A;
  --mb-accent-soft: #14301F;
  --mb-warning: #F2B547;
  --mb-warning-soft: #3A2A0E;
  --mb-danger: #FF7A7A;
  --mb-danger-soft: #3D1A1A;
  --mb-info: #6CC0F0;
  --mb-info-soft: #13293A;

  --mb-bg: #0F1218;
  --mb-surface: #171B23;
  --mb-surface-2: #1F2430;
  --mb-border: #2A3040;
  --mb-text: #EDEFF4;
  --mb-text-2: #A3ABBD;
  --mb-text-3: #6F7788;

  --mb-text-strong: #FFFFFF;
  --mb-border-strong: #3A4358;
  --mb-border-control: #6F7788;
  --mb-accent-text: #4ED39A;
  --mb-warning-text: #F2B547;
  --mb-danger-text: #FF7A7A;
  --mb-info-text: #6CC0F0;
  --mb-on-primary: #0B0E14;
  --mb-on-accent: #0B0E14;
  --mb-on-warning: #0B0E14;
  --mb-on-danger: #0B0E14;
  --mb-on-info: #0B0E14;

  --mb-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  --mb-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --mb-scrim: rgba(0, 0, 0, 0.6);
  --mb-hover-overlay: rgba(255, 255, 255, 0.16);

  --mb-sport: #3FB574;

  --mb-qr-dark: #0B0E14;
  --mb-qr-light: #FFFFFF;

  --mb-series-1: #6B8FFF;
  --mb-series-2: #FB923C;
  --mb-series-3: #2DD4BF;
  --mb-series-4: #A78BFA;
  --mb-series-5: #F472B6;
  --mb-series-6: #A3E635;
}


/* ---------- 3. Non-colour tokens -------------------------------------------- */

:root {
  /* Typefaces. A system font is the fallback: Source Sans 3 is deliberately not in the stack, because Radzen's @font-face
     would make the browser download it while Inter loads (a useless 170 KB). */
  --mb-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mb-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Size scale: 12 / 13 / 14 / 16 / 18 / 22 / 28 / 36 px. The base depends on the density: admin 14 px, member and
     sign-in 16 px (the layouts set it with .mb-density-compact / .mb-density-comfortable). */
  --mb-fs-xs: 0.75rem;
  --mb-fs-sm: 0.8125rem;
  --mb-fs-md: 1rem;
  --mb-fs-lg: 1.125rem;
  --mb-fs-xl: 1.375rem;
  --mb-fs-2xl: 1.75rem;
  --mb-fs-3xl: 2.25rem;
  --mb-fs-base: 0.875rem;
  --mb-lh: 1.45;
  --mb-lh-heading: 1.25;

  /* Space scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 px */
  --mb-space-1: 0.25rem;
  --mb-space-2: 0.5rem;
  --mb-space-3: 0.75rem;
  --mb-space-4: 1rem;
  --mb-space-5: 1.5rem;
  --mb-space-6: 2rem;
  --mb-space-7: 3rem;

  /* Shape: button and field 8, card 12, dialog 16, chip pill */
  --mb-radius: 8px;
  --mb-radius-lg: 12px;
  --mb-radius-xl: 16px;
  --mb-radius-pill: 999px;

  /* Focus: 2 px primary ring, 2 px offset, on every interactive element */
  --mb-focus-width: 2px;
  --mb-focus-offset: 2px;
  --mb-focus-halo: color-mix(in srgb, var(--mb-primary) 24%, transparent);

  /* Layout */
  --mb-header-height: 56px;
  --mb-sidebar-width: 248px;
  --mb-sidebar-rail-width: 72px;
  --mb-sidepanel-width: 520px;
  --mb-bottom-nav-height: 64px;
  --mb-portal-width: 440px;

  /* Motion */
  --mb-transition: 120ms ease;
}

/* Member and sign-in surface: larger base size, rounder shape (reference screen 04), 44 px touch targets. */
.mb-density-comfortable {
  --mb-fs-base: 1rem;
  --mb-radius: 10px;
  --mb-radius-lg: 14px;
}


/* ---------- 4. Radzen mapping ----------------------------------------
   The Radzen `standard` theme is ~1800 --rz-* variables; most of them refer to palette steps (--rz-base-50…900,
   --rz-primary…). We map the palette BY ROLE to the Membria tokens, so Radzen's internal references (written
   for the light theme) resolve correctly in both modes, and the ~200-variable dark difference does not have to
   be copied. We write no .rz-* selectors on purpose: they would break on Radzen updates.
   Check: /dev/stilus (style guide, Development only).
   ------------------------------------------------------------------------- */

:root {
  /* 4.1 Typography, shape, focus */
  --rz-text-font-family: var(--mb-font);
  --rz-body-font-size: var(--mb-fs-base);
  --rz-body-line-height: var(--mb-lh);
  --rz-border-radius: var(--mb-radius);
  --rz-button-border-radius: var(--mb-radius);
  --rz-input-border-radius: var(--mb-radius);
  --rz-card-border-radius: var(--mb-radius-lg);
  --rz-dialog-border-radius: var(--mb-radius-xl);
  --rz-alert-border-radius: var(--mb-radius);
  --rz-outline-width: var(--mb-focus-width);
  --rz-outline-offset: var(--mb-focus-offset);
  --rz-outline-color: var(--mb-primary);
  --rz-white: #FFFFFF;
  --rz-black: #000000;

  /* 4.2 Neutral palette by role (light and dark share the role)
         50 card · 100 soft fill · 200 border · 300–400 strong border · 500 disabled text
         600–700 secondary text · 800 text · 900 heading */
  --rz-base-50: var(--mb-surface);
  --rz-base-100: var(--mb-surface-2);
  --rz-base-200: var(--mb-border);
  --rz-base-300: var(--mb-border-strong);
  --rz-base-400: var(--mb-border-strong);
  --rz-base-500: var(--mb-text-3);
  --rz-base-600: var(--mb-text-2);
  --rz-base-700: var(--mb-text-2);
  --rz-base-800: var(--mb-text);
  --rz-base-900: var(--mb-text-strong);
  --rz-base: var(--mb-border-strong);
  --rz-base-light: var(--mb-border);
  --rz-base-lighter: var(--mb-surface-2);
  --rz-base-dark: var(--mb-text-2);
  --rz-base-darker: var(--mb-text);
  --rz-on-base: var(--mb-text);
  --rz-on-base-light: var(--mb-text);
  --rz-on-base-lighter: var(--mb-text);
  --rz-on-base-dark: var(--mb-surface);
  --rz-on-base-darker: var(--mb-surface);

  --rz-body-background-color: var(--mb-bg);
  --rz-base-background-color: var(--mb-surface);

  /* 4.3 Brand and state colours. Radzen's "light/dark/darker" are the hover and pressed states; "lighter" is the soft
         fill (selected row, menu hover), which the Membria -soft tokens provide. */
  --rz-primary: var(--mb-primary);
  --rz-primary-light: color-mix(in srgb, var(--mb-primary) 82%, var(--rz-white));
  --rz-primary-lighter: var(--mb-primary-soft);
  --rz-primary-dark: color-mix(in srgb, var(--mb-primary) 82%, var(--rz-black));
  --rz-primary-darker: color-mix(in srgb, var(--mb-primary) 68%, var(--rz-black));
  --rz-on-primary: var(--mb-on-primary);
  --rz-on-primary-light: var(--mb-on-primary);
  --rz-on-primary-lighter: var(--mb-primary);
  --rz-on-primary-dark: var(--mb-on-primary);
  --rz-on-primary-darker: var(--mb-on-primary);

  /* Membria has no separate secondary colour: "secondary" is the neutral track (outlined secondary button, icons). */
  --rz-secondary: var(--mb-text-2);
  --rz-secondary-light: color-mix(in srgb, var(--mb-text-2) 82%, var(--rz-white));
  --rz-secondary-lighter: var(--mb-surface-2);
  --rz-secondary-dark: color-mix(in srgb, var(--mb-text-2) 82%, var(--rz-black));
  --rz-secondary-darker: color-mix(in srgb, var(--mb-text-2) 68%, var(--rz-black));
  --rz-on-secondary: var(--mb-surface);
  --rz-on-secondary-light: var(--mb-surface);
  --rz-on-secondary-lighter: var(--mb-text);
  --rz-on-secondary-dark: var(--mb-surface);
  --rz-on-secondary-darker: var(--mb-surface);

  --rz-success: var(--mb-accent);
  --rz-success-light: color-mix(in srgb, var(--mb-accent) 82%, var(--rz-white));
  --rz-success-lighter: var(--mb-accent-soft);
  --rz-success-dark: color-mix(in srgb, var(--mb-accent) 82%, var(--rz-black));
  --rz-success-darker: color-mix(in srgb, var(--mb-accent) 68%, var(--rz-black));
  --rz-on-success: var(--mb-on-accent);
  --rz-on-success-light: var(--mb-on-accent);
  --rz-on-success-lighter: var(--mb-accent-text);
  --rz-on-success-dark: var(--mb-on-accent);
  --rz-on-success-darker: var(--mb-on-accent);

  --rz-warning: var(--mb-warning);
  --rz-warning-light: color-mix(in srgb, var(--mb-warning) 82%, var(--rz-white));
  --rz-warning-lighter: var(--mb-warning-soft);
  --rz-warning-dark: color-mix(in srgb, var(--mb-warning) 82%, var(--rz-black));
  --rz-warning-darker: color-mix(in srgb, var(--mb-warning) 68%, var(--rz-black));
  --rz-on-warning: var(--mb-on-warning);
  --rz-on-warning-light: var(--mb-on-warning);
  --rz-on-warning-lighter: var(--mb-warning-text);
  --rz-on-warning-dark: var(--mb-on-warning);
  --rz-on-warning-darker: var(--mb-on-warning);

  --rz-danger: var(--mb-danger);
  --rz-danger-light: color-mix(in srgb, var(--mb-danger) 82%, var(--rz-white));
  --rz-danger-lighter: var(--mb-danger-soft);
  --rz-danger-dark: color-mix(in srgb, var(--mb-danger) 82%, var(--rz-black));
  --rz-danger-darker: color-mix(in srgb, var(--mb-danger) 68%, var(--rz-black));
  --rz-on-danger: var(--mb-on-danger);
  --rz-on-danger-light: var(--mb-on-danger);
  --rz-on-danger-lighter: var(--mb-danger-text);
  --rz-on-danger-dark: var(--mb-on-danger);
  --rz-on-danger-darker: var(--mb-on-danger);

  --rz-info: var(--mb-info);
  --rz-info-light: color-mix(in srgb, var(--mb-info) 82%, var(--rz-white));
  --rz-info-lighter: var(--mb-info-soft);
  --rz-info-dark: color-mix(in srgb, var(--mb-info) 82%, var(--rz-black));
  --rz-info-darker: color-mix(in srgb, var(--mb-info) 68%, var(--rz-black));
  --rz-on-info: var(--mb-on-info);
  --rz-on-info-light: var(--mb-on-info);
  --rz-on-info-lighter: var(--mb-info-text);
  --rz-on-info-dark: var(--mb-on-info);
  --rz-on-info-darker: var(--mb-on-info);

  /* 4.4 Semantic variables that Radzen does not derive from the palette (bound by hand) */
  --rz-link-color: var(--mb-primary);
  --rz-link-hover-color: var(--mb-primary-strong);

  --rz-border-normal: 1px solid var(--mb-border);
  --rz-border-hover: 1px solid var(--mb-border-strong);

  /* Input fields: 3:1 border (WCAG 1.4.11), primary border and halo on focus */
  --rz-input-border: 1px solid var(--mb-border-control);
  --rz-input-border-block-end: 1px solid var(--mb-border-control);  /* Radzen draws the bottom edge separately (F3.3 fix) */
  --rz-input-hover-border: 1px solid var(--mb-text-2);
  --rz-input-focus-border: 1px solid var(--mb-primary);
  --rz-input-focus-shadow: 0 0 0 var(--mb-focus-width) var(--mb-focus-halo);
  --rz-input-placeholder-color: var(--mb-text-2);
  --rz-checkbox-border-radius: 5px;

  /* Buttons: the hover/pressed layer is a translucent fill, so a filled button darkens in light mode and lightens in dark
     mode (close to the design-system primary-strong); text and outlined variants are not affected */
  --rz-button-base-background-color: var(--mb-surface);
  --rz-button-base-color: var(--mb-text);
  --rz-button-hover-gradient: linear-gradient(var(--mb-hover-overlay), var(--mb-hover-overlay));
  --rz-button-hover-background-size: 100% 100%;
  --rz-button-focus-gradient: linear-gradient(var(--mb-hover-overlay), var(--mb-hover-overlay));
  --rz-button-focus-background-size: 100% 100%;
  --rz-button-active-gradient: linear-gradient(var(--mb-hover-overlay), var(--mb-hover-overlay));
  --rz-button-active-background-size: 100% 100%;

  /* Cards and floating layers: faint card shadow, stronger floating panel (a light ring instead of a shadow in dark mode) */
  --rz-card-shadow: var(--mb-shadow);
  --rz-overlay-shadow: var(--mb-shadow-float);
  --rz-datepicker-panel-shadow: var(--mb-shadow-float);
  --rz-colorpicker-panel-shadow: var(--mb-shadow-float);
  --rz-timespanpicker-popup-shadow: var(--mb-shadow-float);
  --rz-context-menu-box-shadow: var(--mb-shadow-float);
  --rz-dropdown-panel-shadow: var(--mb-shadow-float);
  --rz-dialog-shadow: var(--mb-shadow-float);
  --rz-tooltip-shadow: var(--mb-shadow-float);
  --rz-header-shadow: none;
  --rz-switch-box-shadow: var(--mb-shadow);
  --rz-alert-box-shadow: none;
  --rz-dialog-mask-background-color: var(--mb-scrim);
  --rz-dialog-title-font-size: var(--mb-fs-lg);
  --rz-dialog-title-font-weight: 600;
  --rz-dialog-title-letter-spacing: -0.01em;

  --rz-tooltip-background-color: var(--mb-text);
  --rz-tooltip-color: var(--mb-bg);

  /* Table */
  --rz-grid-selected-background-color: var(--mb-primary-soft);
  --rz-grid-stripe-background-color: var(--mb-bg);
  --rz-grid-header-background-color: var(--mb-surface-2);
  --rz-grid-header-color: var(--mb-text-2);
  --rz-grid-foot-background-color: var(--mb-surface-2);
  --rz-grid-cell-border: 1px solid var(--mb-border);
  --rz-grid-header-cell-border: 1px solid var(--mb-border);
  --rz-grid-bottom-cell-border: 1px solid var(--mb-border);
  --rz-grid-right-cell-border: 1px solid var(--mb-border);
  --rz-grid-data-border-shadow: 0 1px 0 0 var(--mb-border), 0 -1px 0 0 var(--mb-border);

  /* Notifications and alerts: soft state background, colour + icon + text (never colour alone) */
  --rz-alert-background-color: var(--mb-surface-2);
  --rz-scheduler-highlight-background-color: var(--mb-warning-soft);

  /* Side menu (RadzenPanelMenu): light surfaces instead of Radzen's dark bar */
  --rz-panel-menu-item-color: var(--mb-text-2);
  --rz-panel-menu-icon-color: var(--mb-text-2);
  --rz-panel-menu-item-background-color: transparent;
  --rz-panel-menu-item-hover-background-color: var(--mb-surface-2);
  --rz-panel-menu-item-active-background-color: var(--mb-primary-soft);
  --rz-panel-menu-item-active-indicator: var(--mb-primary);
  --rz-panel-menu-item-border: none;
  --rz-panel-menu-item-2nd-level-background-color: transparent;
  --rz-panel-menu-item-2nd-level-hover-background-color: var(--mb-surface-2);
  --rz-panel-menu-item-2nd-level-active-background-color: var(--mb-primary-soft);
  --rz-panel-menu-item-3rd-level-background-color: transparent;
  --rz-panel-menu-item-3rd-level-hover-background-color: var(--mb-surface-2);
  --rz-panel-menu-item-3rd-level-active-background-color: var(--mb-primary-soft);

  --rz-scrollbar-color: color-mix(in srgb, var(--mb-text-3) 50%, transparent);

  /* Chart series (S1.12): the first six Radzen series take the Membria series tokens, so a chart follows the theme; a chart
     may map its series to other tokens on its own element (the statistics' charts do). The rest stay Radzen's (not used). */
  --rz-series-1: var(--mb-series-1);
  --rz-series-2: var(--mb-series-2);
  --rz-series-3: var(--mb-series-3);
  --rz-series-4: var(--mb-series-4);
  --rz-series-5: var(--mb-series-5);
  --rz-series-6: var(--mb-series-6);
  --rz-chart-axis-label-color: var(--mb-text-2);
  --rz-chart-tooltip-background: var(--mb-surface);
  --rz-chart-tooltip-color: var(--mb-text);
}

/* Member and sign-in density: part of the Radzen variables is already substituted on :root (descendants inherit the
   computed value), so the leaf variables must be set again here, not the chain that refers to --rz-body-font-size. */
.mb-density-comfortable {
  --rz-body-font-size: 1rem;
  --rz-input-font-size: 1rem;
  --rz-input-height: 2.75rem;
  --rz-input-padding-block: 0.625rem;
  --rz-input-padding-inline: 0.75rem;
  --rz-input-line-height: 1.25rem;
  /* Radzen 12 inputs carry the size class .rz-input-md, which maps the four variables above from these (F3.3 fix). */
  --rz-input-size-md: 2.75rem;
  --rz-input-padding-block-md: 0.625rem;
  --rz-input-padding-inline-md: 0.75rem;
  --rz-input-font-size-md: 1rem;
  --rz-button-size-md: 2.75rem;
  --rz-button-border-radius: var(--mb-radius);
  --rz-input-border-radius: var(--mb-radius);
  --rz-card-border-radius: var(--mb-radius-lg);
}