/* The Maiß design system, taken verbatim from the guest mockup
   (Terminbuchung Gast - Mockups.html, Robert Haas, 07.08.2026).

   This file holds values and nothing else. No component ever writes a brand
   colour, size or duration as a literal -- it reads one of these. That is
   what makes the later webinar screens (US-03/04/08/24/25/26) inherit the
   look for free instead of choosing it a second time.

   Light only, on purpose: the admin theme pins its own too, and one
   committed look is the point. color-scheme keeps the browser from darkening
   form controls and scrollbars underneath a light page. */
:root {
  color-scheme: light;

  /* Brand red. Two authentic reds live side by side in Maiß material:
     --maiss-red       #B51E28  sampled from maiss.de (nav rule, buttons)
     --maiss-red-print #E30613  Euroskala 0/100/100/0, the printed flyers
     Digital work uses --maiss-red. */
  --maiss-red: #B51E28;
  --maiss-red-print: #E30613;
  --red-900: #7A1319;
  --red-800: #9A1922;
  --red-200: #F1C4C7;
  --red-100: #F8E5E7;
  --red-050: #FCF2F3;

  /* Near-black is #1D1D1B, the German CMYK "Schwarz", never pure #000. */
  --black: #1D1D1B;
  --gray-900: #2B2B29;
  --gray-800: #3F3F3D;
  --gray-700: #5A5A58;
  --gray-650: #707070;
  --gray-600: #747474;
  --gray-500: #9A9A9A;
  --gray-400: #C4C4C4;
  --gray-300: #DEDEDE;
  --gray-200: #EDEDED;
  --gray-150: #EFEFEF;
  --gray-100: #F5F5F5;
  --gray-050: #FAFAFA;
  --white: #FFFFFF;

  /* Semantic aliases -- components use these, not the ramps above.

     The three text tones are pinned by contrast, not by taste, and
     test_contrast.py recomputes every pairing below against WCAG 2.1 AA. They
     were measured on 02.09.2026 and two of them failed:

       --text-body was --gray-600 (#747474). body{} sets it on --surface-page,
       so it is the *default* pairing of the whole guest UI -- 4.29:1, under
       the 4.5:1 AA asks of body text. On a white card the same grey reaches
       4.67 and passes, which is why it looked fine wherever anyone checked.

       --text-muted was --gray-500 (#9A9A9A) at 2.81:1, and it carries the step
       labels and the "choose a day to see times" instruction -- text somebody
       has to read, not decoration.

     The order matters as much as the numbers. #707070 is the *lightest* grey
     that still clears 4.5:1 on the page background, so a muted tone lighter
     than this cannot pass; body therefore moved down to --gray-700 to keep a
     visible hierarchy instead of the two collapsing into one shade. Making
     muted merely "not lighter than body" would have inverted it. */
  --text-strong: var(--black);
  --text-body: var(--gray-700);
  --text-muted: var(--gray-650);
  --text-on-red: var(--white);
  --text-eyebrow: var(--gray-650);

  --surface-page: var(--gray-100);
  --surface-card: var(--white);
  --surface-subtle: var(--gray-050);
  --surface-sunken: var(--gray-100);

  /* Two kinds of line, and only one of them is regulated.

     --border-hairline (1.35:1) rules off cards and lists. WCAG 1.4.11 asks
     nothing of a decorative separator, so it stays as designed.

     --border-control is the visual boundary of a form field, and that *is*
     regulated: the field is white on a white card, so the border is the only
     thing saying where it is. #949494 is the lightest grey clearing the 3:1
     that 1.4.11 requires of a user-interface component. The old field border
     was --border-hairline at 1.35:1.

     Not one token for both: they are different jobs with different rules, and
     darkening every hairline to 3:1 would redraw the whole layout for a
     requirement that does not apply to it. */
  --border-hairline: var(--gray-300);
  --border-control: #949494;
  --border-strong: var(--gray-400);
  --accent-rule: var(--maiss-red);
  --focus-ring: var(--maiss-red);

  --state-error: var(--maiss-red);
  --state-success: #2E7D32;

  --hover-darken: #9A1922;
  --press-darken: #7A1319;
  --disabled-opacity: .45;

  /* Type. Roboto is the only family; see fonts.css. */
  --font-core: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-core);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-display: 44px;  --lh-display: 1.15;
  --fs-h1: 36px;       --lh-h1: 1.2;
  --fs-result: 32px;
  --fs-h2: 28px;       --lh-h2: 1.25;
  --fs-h3: 22px;       --lh-h3: 1.3;
  --fs-h4: 18px;       --lh-h4: 1.35;
  --fs-lead: 19px;     --lh-lead: 1.6;
  --fs-body: 17px;     --lh-body: 1.6;
  --fs-body-sm: 15px;  --lh-body-sm: 1.55;
  --fs-caption: 13px;  --lh-caption: 1.45;
  --fs-eyebrow: 12px;  --lh-eyebrow: 1.2;
  --fs-label: 14px;
  --fs-control: 16px;
  --fs-error: 13.5px;
  /* The smallest type in the system: uppercase, letter-spaced micro-labels.
     The calendar's weekday letters, the sold-out flag, the topic chip. It was
     a literal with one consumer until the webinar cards gave it two more --
     three uses is a scale step, not a bespoke value. */
  --fs-micro: 11.5px;

  --ls-eyebrow: .16em;
  --ls-label: .09em;

  /* 4px base, but Maiß layouts lean on generous 40/64/96 vertical rhythm. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  --container-max: 1180px;
  --content-max: 560px;
  --page-pad-x: 40px;

  /* Maiß is a square-cornered brand. Radius appears in exactly two places
     here: the calendar's day discs and the host portrait, both circles. */
  --radius-0: 0px;
  --radius-circle: 50%;

  --bw-hairline: 1px;
  --bw-rule: 4px;        /* the signature headline rule */
  --bw-bullet: 3px;      /* red rule used as a list bullet */
  --bw-topbar: 4px;      /* the red line pinned above the site header */
  --bw-cardtop: 6px;     /* red top edge on confirmation cards */

  /* Soft, wide, low-contrast, grayscale. Never coloured, never tight. */
  --shadow-sm: 0 1px 3px rgba(29, 29, 27, .08);
  --shadow-card: 0 2px 10px rgba(29, 29, 27, .10);
  --shadow-panel: 0 6px 28px rgba(29, 29, 27, .13);

  /* Restrained, functional motion. Fades and small colour shifts only. */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --transition-color: color var(--dur-base) var(--ease-standard),
                      background-color var(--dur-base) var(--ease-standard),
                      border-color var(--dur-base) var(--ease-standard);
}