/* =========================================================================
   Schermal Mechatronik — Design System (single bundled stylesheet)
   GENERATED from tokens/*.css (the editable source of truth) — concatenated to
   avoid a render-blocking import chain. Font paths rewritten to web-root-relative.
   Regenerate after token edits (order: fonts, colors, typography, spacing, base).
   ========================================================================= */

/* ===== tokens/fonts.css (bundled) ===== */
/* Schermal Mechatronik — Webfonts (SELF-HOSTED for DSGVO compliance)
   Display: Space Grotesk · Body/UI: IBM Plex Sans · Labels/Specs: IBM Plex Mono.
   woff2 files live in assets/fonts/ — no external request to Google (visitor IP
   stays local). Only latin + latin-ext subsets are bundled (covers German + €).
   Regenerate with fetch_fonts.py if weights/subsets change.
   SUBSTITUTION NOTE: the logo wordmark is a proprietary heavy geometric sans;
   Space Grotesk is the closest open analogue for headline use. */

/* IBM Plex Mono 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibmplexmono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 400 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibmplexmono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibmplexmono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 500 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibmplexmono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 600 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ibmplexmono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 600 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ibmplexmono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/ibmplexsans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 400 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/ibmplexsans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/ibmplexsans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 500 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/ibmplexsans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 600 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/ibmplexsans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 600 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/ibmplexsans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 700 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/ibmplexsans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 700 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/ibmplexsans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk 400 — latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk 400 — latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk 500 — latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk 500 — latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk 600 — latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk 600 — latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk 700 — latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk 700 — latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== tokens/colors.css (bundled) ===== */
/* Schermal Mechatronik — Color tokens
   "Blau und Weißtöne: Vertrauen · Zuverlässigkeit · Professionalität — klarer, cleaner Look"
   Core = deep navy (#0b112b, the logo field) + bright cyan accent (#16cad4, the circuit nodes).
   Neutrals are cool blue-greys. Cyan is the highlight/accent; navy is the workhorse fill + text. */
:root {
  /* ---- Navy (brand core, dark surfaces, body text) ---- */
  --navy-900: #0b112b;   /* logo field — primary brand color */
  --navy-850: #0e1531;
  --navy-800: #111a38;
  --navy-700: #1a2748;
  --navy-600: #26375a;
  --navy-500: #3a4d70;   /* muted navy on dark */
  --navy-400: #5b6985;

  /* ---- Cyan (brand accent, circuit nodes, CTA highlight) ---- */
  --cyan-500: #16cad4;   /* signature accent */
  --cyan-600: #0fa9b3;   /* hover / press */
  --cyan-700: #0a7c84;   /* accent-ink: text-safe cyan on white (≈5:1 AA for small labels/links) */
  --cyan-400: #45d6de;
  --cyan-300: #7ee2e8;
  --cyan-100: #d4f4f6;   /* subdued accent fill */
  --cyan-050: #ecfbfc;

  /* ---- Teal (deep circuit traces, secondary accent) ---- */
  --teal-700: #0a5b60;
  --teal-800: #073d40;

  /* ---- Neutrals (cool blue-grey) ---- */
  --white: #ffffff;
  --grey-050: #f7f9fc;   /* cool off-white surface */
  --grey-100: #eef2f7;
  --grey-200: #e3e8f0;   /* hairline */
  --grey-300: #cdd6e2;   /* strong hairline */
  --grey-400: #aab6c8;
  --grey-500: #8893a5;   /* soft muted text */
  --grey-600: #5b6679;   /* muted text */
  --grey-700: #2a3650;   /* secondary text */

  /* ---- Status (kept minimal; used in product/forms, not marketing) ---- */
  --green-600: #1f9d57;
  --green-100: #def3e7;
  --amber-600: #c2790f;
  --amber-100: #f8ecd2;
  --red-600:   #d23b4e;
  --red-100:   #fbe2e5;

  /* =====================================================================
     SEMANTIC ALIASES — reference these in components, not the scales above
     ===================================================================== */
  --brand:              var(--navy-900);
  --accent:             var(--cyan-500);
  --accent-hover:       var(--cyan-600);
  --accent-ink:         var(--cyan-700);   /* cyan as readable text on white */
  --accent-soft:        var(--cyan-100);

  /* Text */
  --text-primary:       var(--navy-900);
  --text-secondary:     var(--grey-700);
  --text-muted:         var(--grey-600);
  --text-faint:         #6a7587;   /* darkened from grey-500 to clear AA 4.5:1 on white for hints/notes */
  --text-on-dark:       #ffffff;
  --text-on-dark-soft:  #b6c1d6;
  --text-on-dark-faint: #6c7894;
  --text-link:          var(--cyan-700);

  /* Surfaces */
  --surface-page:       #ffffff;
  --surface-subtle:     var(--grey-050);
  --surface-muted:      var(--grey-100);
  --surface-card:       #ffffff;
  --surface-dark:       var(--navy-900);
  --surface-dark-2:     var(--navy-800);
  --surface-dark-card:  var(--navy-700);

  /* Borders */
  --border-subtle:      var(--grey-200);
  --border-strong:      var(--grey-300);
  --border-on-dark:     rgba(255,255,255,0.10);
  --border-accent:      var(--cyan-500);

  /* CTA roles */
  --cta-bg:             var(--navy-900);
  --cta-bg-hover:       var(--navy-700);
  --cta-text:           #ffffff;
  --cta-accent-bg:      var(--cyan-500);
  --cta-accent-bg-hover:var(--cyan-600);
  --cta-accent-text:    var(--navy-900);

  /* Focus */
  --focus-ring:         0 0 0 3px rgba(22,202,212,0.40);
}

/* ===== tokens/typography.css (bundled) ===== */
/* Schermal Mechatronik — Typography tokens
   Space Grotesk (display) · IBM Plex Sans (body/UI) · IBM Plex Mono (labels/specs).
   Sturdy semibold display weights (500–700) for an engineering, trustworthy tone —
   not airy. Negative tracking on display tiers keeps headlines tight and confident. */
:root {
  /* Families */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */

  /* ---- Display tier (Space Grotesk, tight tracking) ---- */
  --display-xxl-size: 60px;  /* @kind font */
  --display-xxl-lh: 1.04;    /* @kind font */
  --display-xxl-ls: -2px;    /* @kind font */
  --display-xxl-weight: 600; /* @kind font */
  --display-xl-size:  46px;  /* @kind font */
  --display-xl-lh:  1.08;    /* @kind font */
  --display-xl-ls:  -1.4px;  /* @kind font */
  --display-xl-weight:  600; /* @kind font */
  --display-lg-size:  34px;  /* @kind font */
  --display-lg-lh:  1.12;    /* @kind font */
  --display-lg-ls:  -0.8px;  /* @kind font */
  --display-lg-weight:  600; /* @kind font */
  --display-md-size:  26px;  /* @kind font */
  --display-md-lh:  1.18;    /* @kind font */
  --display-md-ls:  -0.4px;  /* @kind font */
  --display-md-weight:  600; /* @kind font */

  /* ---- Heading tier ---- */
  --heading-lg-size: 22px;   /* @kind font */
  --heading-lg-lh: 1.25;     /* @kind font */
  --heading-lg-ls: -0.3px;   /* @kind font */
  --heading-lg-weight: 600;  /* @kind font */
  --heading-md-size: 19px;   /* @kind font */
  --heading-md-lh: 1.35;     /* @kind font */
  --heading-md-ls: -0.2px;   /* @kind font */
  --heading-md-weight: 600;  /* @kind font */
  --heading-sm-size: 16px;   /* @kind font */
  --heading-sm-lh: 1.4;      /* @kind font */
  --heading-sm-ls: -0.1px;   /* @kind font */
  --heading-sm-weight: 600;  /* @kind font */

  /* ---- Body tier (IBM Plex Sans) ---- */
  --body-lg-size: 18px;  /* @kind font */
  --body-lg-lh: 1.6;     /* @kind font */
  --body-lg-weight: 400; /* @kind font */
  --body-md-size: 16px;  /* @kind font */
  --body-md-lh: 1.6;     /* @kind font */
  --body-md-weight: 400; /* @kind font */
  --body-sm-size: 14px;  /* @kind font */
  --body-sm-lh: 1.55;    /* @kind font */
  --body-sm-weight: 400; /* @kind font */

  /* ---- UI / supporting ---- */
  --button-size: 15px;   /* @kind font */
  --button-weight: 500;  /* @kind font */
  --button-ls: 0.1px;    /* @kind font */
  --caption-size: 13px;  /* @kind font */
  --caption-lh: 1.45;    /* @kind font */
  --caption-weight: 400; /* @kind font */
  --micro-size: 11px;    /* @kind font */
  --micro-lh: 1.3;       /* @kind font */
  --micro-weight: 500;   /* @kind font */

  /* ---- Eyebrow / label (IBM Plex Mono, spaced caps — the "MECHATRONIK" voice) ---- */
  --eyebrow-size: 12px;   /* @kind font */
  --eyebrow-weight: 500;  /* @kind font */
  --eyebrow-ls: 0.2em;    /* @kind font */

  /* Tabular numerics — for prices, phone numbers, spec figures */
  --num-feature: "tnum";  /* @kind other */
}

/* Convenience utility classes (optional; tokens above are the source of truth) */
.t-display-xxl { font-family: var(--font-display); font-size: var(--display-xxl-size); line-height: var(--display-xxl-lh); letter-spacing: var(--display-xxl-ls); font-weight: var(--display-xxl-weight); }
.t-display-xl  { font-family: var(--font-display); font-size: var(--display-xl-size);  line-height: var(--display-xl-lh);  letter-spacing: var(--display-xl-ls);  font-weight: var(--display-xl-weight); }
.t-display-lg  { font-family: var(--font-display); font-size: var(--display-lg-size);  line-height: var(--display-lg-lh);  letter-spacing: var(--display-lg-ls);  font-weight: var(--display-lg-weight); }
.t-display-md  { font-family: var(--font-display); font-size: var(--display-md-size);  line-height: var(--display-md-lh);  letter-spacing: var(--display-md-ls);  font-weight: var(--display-md-weight); }
.t-heading-lg  { font-family: var(--font-display); font-size: var(--heading-lg-size);  line-height: var(--heading-lg-lh);  letter-spacing: var(--heading-lg-ls);  font-weight: var(--heading-lg-weight); }
.t-heading-md  { font-family: var(--font-display); font-size: var(--heading-md-size);  line-height: var(--heading-md-lh);  letter-spacing: var(--heading-md-ls);  font-weight: var(--heading-md-weight); }
.t-body-lg     { font-family: var(--font-sans); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.t-body-md     { font-family: var(--font-sans); font-size: var(--body-md-size); line-height: var(--body-md-lh); }
.t-eyebrow     { font-family: var(--font-mono); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-ls); text-transform: uppercase; }
.t-num         { font-feature-settings: var(--num-feature); }

/* ===== tokens/spacing.css (bundled) ===== */
/* Schermal Mechatronik — Spacing, radius, shadow, layout tokens
   4px base grid. Squared-but-clean radii (engineering feel, not pill-soft).
   Shadows are navy-tinted and restrained — the brand reads crisp, not floaty. */
:root {
  /* ---- Spacing (4px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Semantic spacing */
  --section-pad-y: 96px;   /* marketing section vertical rhythm */
  --section-pad-y-sm: 64px;
  --card-pad: 28px;
  --gutter: 24px;

  /* ---- Radius (squared, technical) ---- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* buttons, inputs */
  --radius-lg: 14px;   /* cards */
  --radius-xl: 20px;   /* feature panels, media */
  --radius-2xl: 28px;
  --radius-pill: 999px; /* tags, chips */

  /* ---- Border widths ---- */
  --border-1: 1px;
  --border-2: 1.5px;

  /* ---- Shadows (navy-tinted, restrained) ---- */
  --shadow-xs: 0 1px 2px rgba(11,17,43,0.06);
  --shadow-sm: 0 1px 3px rgba(11,17,43,0.08), 0 1px 2px rgba(11,17,43,0.04);
  --shadow-md: 0 8px 24px rgba(11,17,43,0.08), 0 2px 6px rgba(11,17,43,0.05);
  --shadow-lg: 0 20px 48px rgba(11,17,43,0.12), 0 6px 16px rgba(11,17,43,0.06);
  --shadow-accent: 0 8px 22px rgba(22,202,212,0.28);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-subtle);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-wide: 1360px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* ===== tokens/base.css (bundled) ===== */
/* Schermal Mechatronik — Base element defaults
   Sets the brand's default body type, link color, and sensible resets.
   Imported last so it can reference all tokens. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--cyan-600); }

/* Numeric/price/phone helper */
.tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

::selection { background: var(--cyan-100); color: var(--navy-900); }