:root {
/* ==========================================================================
  BASELINE TOKENS: site-wide defaults and semantic relationships
  L.T.C. Handel & Technik GmbH · Industrial Precision · Light theme
  ========================================================================== */

  /* ---- FONTS ---- */
  --mrkt-font-heading: "Archivo", system-ui, sans-serif;
  --mrkt-font-body: "Archivo", system-ui, sans-serif;
  --mrkt-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --mrkt-font-heading-stretch: 112%;

  /* ---- COLORS ---- */
  --mrkt-color-white: oklch(1 0 0);
  --mrkt-color-black: oklch(0.165 0.012 250);

  --mrkt-color-primary:       var(--mrkt-color-primary-500);   /* LTC Blue */
  --mrkt-color-secondary:     var(--mrkt-color-secondary-500); /* LTC Red  */
  --mrkt-color-accent:        var(--mrkt-color-accent-500);    /* Neutral  */

  --mrkt-color-background:     var(--mrkt-color-accent-50);
  --mrkt-color-background-alt: var(--mrkt-color-accent-100);

  --mrkt-color-surface:       var(--mrkt-color-white);
  --mrkt-color-surface-dark:  var(--mrkt-color-primary-800);

  --mrkt-color-border:        var(--mrkt-color-accent-200);
  --mrkt-color-border-soft:   var(--mrkt-color-accent-100);

  --mrkt-color-text:          var(--mrkt-color-accent-900);
  --mrkt-color-text-muted:    var(--mrkt-color-accent-600);

  /* ---- LAYOUT: desktop defaults ---- */
  --mrkt-space-base: var(--mrkt-space-M);
  --mrkt-base-gap: var(--mrkt-space-base);
  --mrkt-section-gap: var(--mrkt-space-XL);

  --mrkt-header-height: 76px;

  --mrkt-section-padding-block: var(--mrkt-space-XXL);
  --mrkt-section-padding-inline: clamp(1.25rem, 5vw, 6rem);

  --mrkt-section-padding-left: var(--mrkt-section-padding-inline);
  --mrkt-section-padding-right: var(--mrkt-section-padding-inline);
  --mrkt-section-padding-top: var(--mrkt-section-padding-block);
  --mrkt-section-padding-bottom: var(--mrkt-section-padding-block);

  --mrkt-max-content-width: 62ch;

  /* ---- DEFAULT BODY ROLE: M unless deliberately overridden ---- */
  --mrkt-typo-body-family: var(--mrkt-typo-body-M-family);
  --mrkt-typo-body-size: var(--mrkt-typo-body-M-size);
  --mrkt-typo-body-weight: var(--mrkt-typo-body-M-weight);
  --mrkt-typo-body-line-height: var(--mrkt-typo-body-M-line-height);
  --mrkt-typo-body-letter-spacing: var(--mrkt-typo-body-M-letter-spacing);

  /* ---- BORDERS & DEPTH ---- */
  --mrkt-border-radius-base: var(--mrkt-border-radius-S);
  --mrkt-border-width: 1px;
  --mrkt-border-type: solid;
  --mrkt-shadow-base: var(--mrkt-shadow-M);

  /* ---- TRANSITIONS ---- */
  --mrkt-transition-curve: cubic-bezier(0.2, 0, 0, 1);
  --mrkt-transition-fast: 140ms;
  --mrkt-transition-base: 240ms;
  --mrkt-transition-slow: 560ms;

/* ==========================================================================
   SPACING SCALE: L / desktop; complete defaults outside media queries
   ========================================================================== */
  --mrkt-space-XXS: 0.25rem;
  --mrkt-space-XS:  0.5rem;
  --mrkt-space-S:   1rem;
  --mrkt-space-M:   2rem;
  --mrkt-space-L:   4rem;
  --mrkt-space-XL:  6rem;
  --mrkt-space-XXL: 8rem;

/* ==========================================================================
   BORDER RADIUS SCALE: precision look, near-sharp
   ========================================================================== */
  --mrkt-border-radius-S: 2px;
  --mrkt-border-radius-M: 4px;
  --mrkt-border-radius-L: 8px;
  --mrkt-border-radius-full: 9999px;

/* ==========================================================================
   SHADOWS: tinted to the blue ink, never pure black
   ========================================================================== */
  --mrkt-shadow-S: 0 1px 2px oklch(from var(--mrkt-color-primary-900) l c h / 0.08), 0 1px 1px oklch(from var(--mrkt-color-primary-900) l c h / 0.05);
  --mrkt-shadow-M: 0 8px 24px oklch(from var(--mrkt-color-primary-900) l c h / 0.1), 0 2px 6px oklch(from var(--mrkt-color-primary-900) l c h / 0.06);
  --mrkt-shadow-L: 0 24px 60px oklch(from var(--mrkt-color-primary-900) l c h / 0.16), 0 8px 18px oklch(from var(--mrkt-color-primary-900) l c h / 0.08);

/* ==========================================================================
   TYPOGRAPHY SCALE
   ========================================================================== */
  --mrkt-typo-body-S-family: var(--mrkt-font-body);
  --mrkt-typo-body-S-size: 0.9375rem;
  --mrkt-typo-body-S-weight: 400;
  --mrkt-typo-body-S-line-height: 1.5;
  --mrkt-typo-body-S-letter-spacing: 0;

  --mrkt-typo-body-M-family: var(--mrkt-font-body);
  --mrkt-typo-body-M-size: 1.0625rem;
  --mrkt-typo-body-M-weight: 400;
  --mrkt-typo-body-M-line-height: 1.6;
  --mrkt-typo-body-M-letter-spacing: 0;

  --mrkt-typo-body-L-family: var(--mrkt-font-body);
  --mrkt-typo-body-L-size: 1.25rem;
  --mrkt-typo-body-L-weight: 400;
  --mrkt-typo-body-L-line-height: 1.55;
  --mrkt-typo-body-L-letter-spacing: -0.005em;

  --mrkt-typo-button-family: var(--mrkt-font-body);
  --mrkt-typo-button-size: 0.9375rem;
  --mrkt-typo-button-weight: 600;
  --mrkt-typo-button-line-height: 1;
  --mrkt-typo-button-letter-spacing: 0.01em;

  --mrkt-typo-eyebrow-family: var(--mrkt-font-mono);
  --mrkt-typo-eyebrow-size: 0.75rem;
  --mrkt-typo-eyebrow-weight: 500;
  --mrkt-typo-eyebrow-line-height: 1.4;
  --mrkt-typo-eyebrow-letter-spacing: 0.08em;

  --mrkt-typo-h1-family: var(--mrkt-font-heading);
  --mrkt-typo-h1-size: clamp(3rem, 7.2vw, 6.5rem);
  --mrkt-typo-h1-weight: 800;
  --mrkt-typo-h1-line-height: 0.95;
  --mrkt-typo-h1-letter-spacing: -0.035em;

  --mrkt-typo-h2-family: var(--mrkt-font-heading);
  --mrkt-typo-h2-size: clamp(2rem, 3.6vw, 3.25rem);
  --mrkt-typo-h2-weight: 750;
  --mrkt-typo-h2-line-height: 1.05;
  --mrkt-typo-h2-letter-spacing: -0.025em;

  --mrkt-typo-h3-family: var(--mrkt-font-heading);
  --mrkt-typo-h3-size: clamp(1.5rem, 2vw, 2rem);
  --mrkt-typo-h3-weight: 700;
  --mrkt-typo-h3-line-height: 1.15;
  --mrkt-typo-h3-letter-spacing: -0.015em;

  --mrkt-typo-h4-family: var(--mrkt-font-heading);
  --mrkt-typo-h4-size: 1.25rem;
  --mrkt-typo-h4-weight: 700;
  --mrkt-typo-h4-line-height: 1.25;
  --mrkt-typo-h4-letter-spacing: -0.01em;

  --mrkt-typo-h5-family: var(--mrkt-font-heading);
  --mrkt-typo-h5-size: 1.0625rem;
  --mrkt-typo-h5-weight: 650;
  --mrkt-typo-h5-line-height: 1.35;
  --mrkt-typo-h5-letter-spacing: 0;

  --mrkt-typo-h6-family: var(--mrkt-font-heading);
  --mrkt-typo-h6-size: 0.9375rem;
  --mrkt-typo-h6-weight: 650;
  --mrkt-typo-h6-line-height: 1.4;
  --mrkt-typo-h6-letter-spacing: 0.01em;

/* --------------------------------------------------------------------------
   COLOR SCALE
   -------------------------------------------------------------------------- */

  /* Primary: LTC Blue (H 251) */
  --mrkt-color-primary-100: oklch(0.955 0.018 251);
  --mrkt-color-primary-200: oklch(0.905 0.040 251);
  --mrkt-color-primary-300: oklch(0.800 0.072 251);
  --mrkt-color-primary-400: oklch(0.620 0.110 251);
  --mrkt-color-primary-500: oklch(0.419 0.116 251); /* #0A4E89 Brand base */
  --mrkt-color-primary-600: oklch(0.360 0.100 251);
  --mrkt-color-primary-700: oklch(0.300 0.082 251);
  --mrkt-color-primary-800: oklch(0.245 0.064 251);
  --mrkt-color-primary-900: oklch(0.190 0.045 251);

  /* Secondary: LTC Red (H 26.5), accent use only */
  --mrkt-color-secondary-100: oklch(0.950 0.025 26.5);
  --mrkt-color-secondary-200: oklch(0.890 0.060 26.5);
  --mrkt-color-secondary-300: oklch(0.780 0.120 26.5);
  --mrkt-color-secondary-400: oklch(0.660 0.190 26.5);
  --mrkt-color-secondary-500: oklch(0.546 0.219 26.5); /* #D20A1C Brand base */
  --mrkt-color-secondary-600: oklch(0.480 0.195 26.5);
  --mrkt-color-secondary-700: oklch(0.410 0.165 26.5);
  --mrkt-color-secondary-800: oklch(0.340 0.130 26.5);
  --mrkt-color-secondary-900: oklch(0.270 0.095 26.5);

  /* Accent: cool steel neutral, tuned for light UI (H 250) */
  --mrkt-color-accent-50:  oklch(0.985 0.003 250);
  --mrkt-color-accent-100: oklch(0.962 0.005 250);
  --mrkt-color-accent-200: oklch(0.915 0.008 250);
  --mrkt-color-accent-300: oklch(0.850 0.010 250);
  --mrkt-color-accent-400: oklch(0.720 0.013 250);
  --mrkt-color-accent-500: oklch(0.580 0.015 250);
  --mrkt-color-accent-600: oklch(0.470 0.016 250);
  --mrkt-color-accent-700: oklch(0.370 0.016 250);
  --mrkt-color-accent-800: oklch(0.280 0.014 250);
  --mrkt-color-accent-900: oklch(0.210 0.012 250);
  --mrkt-color-accent-950: oklch(0.165 0.010 250);

  /* Transparency (relative OKLCH, add as needed.) */
  --mrkt-color-primary-a10:   oklch(from var(--mrkt-color-primary) l c h / 0.1);
  --mrkt-color-primary-a20:   oklch(from var(--mrkt-color-primary) l c h / 0.2);
  --mrkt-color-primary-a40:   oklch(from var(--mrkt-color-primary) l c h / 0.4);

  --mrkt-color-secondary-a10: oklch(from var(--mrkt-color-secondary) l c h / 0.1);
  --mrkt-color-secondary-a20: oklch(from var(--mrkt-color-secondary) l c h / 0.2);

  --mrkt-color-white-a05: oklch(from var(--mrkt-color-white) l c h / 0.05);
  --mrkt-color-white-a10: oklch(from var(--mrkt-color-white) l c h / 0.1);
  --mrkt-color-white-a20: oklch(from var(--mrkt-color-white) l c h / 0.2);
  --mrkt-color-white-a60: oklch(from var(--mrkt-color-white) l c h / 0.6);
  --mrkt-color-black-a40: oklch(from var(--mrkt-color-black) l c h / 0.4);
  --mrkt-color-black-a60: oklch(from var(--mrkt-color-black) l c h / 0.6);
}
/* ==========================================================================
   RESET-LIGHT
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--mrkt-header-height);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--mrkt-typo-body-family);
  font-size: var(--mrkt-typo-body-size);
  font-weight: var(--mrkt-typo-body-weight);
  line-height: var(--mrkt-typo-body-line-height);
  letter-spacing: var(--mrkt-typo-body-letter-spacing);
  color: var(--mrkt-color-text);
  background: var(--mrkt-color-background);
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--mrkt-color-secondary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   RESPONSIVE OVERRIDES: desktop first; M < 1301px, S < 768px
   ========================================================================== */

/* M and smaller; S overrides follow. Print retains the complete root defaults. */
@media screen and (width < 1301px) {
  :root {
    /* Header Height */
    --mrkt-header-height: 68px;

    /* Gaps */
    --mrkt-section-gap: var(--mrkt-space-L);
    --mrkt-base-gap: var(--mrkt-space-S);

    /* Spacing Scale */
    --mrkt-space-S:   0.875rem;
    --mrkt-space-M:   1.5rem;
    --mrkt-space-L:   3rem;
    --mrkt-space-XL:  4.5rem;
    --mrkt-space-XXL: 6rem;

    /* Section Padding */
    --mrkt-section-padding-block: var(--mrkt-space-XL);
  }
}

/* S */
@media screen and (width < 768px) {
  :root {
    /* Header Height */
    --mrkt-header-height: 60px;

    /* Gaps */
    --mrkt-section-gap: var(--mrkt-space-M);
    --mrkt-base-gap: var(--mrkt-space-XS);

    /* Spacing Scale */
    --mrkt-space-XS:  0.375rem;
    --mrkt-space-S:   0.75rem;
    --mrkt-space-M:   1.25rem;
    --mrkt-space-L:   2rem;
    --mrkt-space-XL:  3.5rem;
    --mrkt-space-XXL: 4.5rem;

    /* Section Padding */
    --mrkt-section-padding-inline: 1.25rem;
    --mrkt-section-padding-block: var(--mrkt-space-XL);

    /* Type */
    --mrkt-typo-body-M-size: 1rem;
    --mrkt-typo-body-L-size: 1.125rem;
  }
}

/* ==========================================================================
   UTILITIE CLASSES
   ========================================================================== */

/* Section default padding. Add variations like --breakout below. */
.mrkt-section {
  padding-inline: var(--mrkt-section-padding-inline);
  padding-block: var(--mrkt-section-padding-block);
}

.mrkt-section-bg {
  background-color: var(--mrkt-color-background);
}

.mrkt-section-bg-alt {
  background-color: var(--mrkt-color-background-alt);
}

.mrkt-section-bg-dark {
  background-color: var(--mrkt-color-surface-dark);
  color: var(--mrkt-color-accent-50);
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   Explicit classes determine appearance; heading tags retain their semantic role.
   ========================================================================== */

/* Semantic for Default. May match a Size based version. */
.mrkt-typo-body {
  font-family: var(--mrkt-typo-body-family);
  font-size: var(--mrkt-typo-body-size);
  font-weight: var(--mrkt-typo-body-weight);
  line-height: var(--mrkt-typo-body-line-height);
  letter-spacing: var(--mrkt-typo-body-letter-spacing);
}

.mrkt-typo-body-S {
  font-family: var(--mrkt-typo-body-S-family);
  font-size: var(--mrkt-typo-body-S-size);
  font-weight: var(--mrkt-typo-body-S-weight);
  line-height: var(--mrkt-typo-body-S-line-height);
  letter-spacing: var(--mrkt-typo-body-S-letter-spacing);
}

.mrkt-typo-body-M {
  font-family: var(--mrkt-typo-body-M-family);
  font-size: var(--mrkt-typo-body-M-size);
  font-weight: var(--mrkt-typo-body-M-weight);
  line-height: var(--mrkt-typo-body-M-line-height);
  letter-spacing: var(--mrkt-typo-body-M-letter-spacing);
}

.mrkt-typo-body-L {
  font-family: var(--mrkt-typo-body-L-family);
  font-size: var(--mrkt-typo-body-L-size);
  font-weight: var(--mrkt-typo-body-L-weight);
  line-height: var(--mrkt-typo-body-L-line-height);
  letter-spacing: var(--mrkt-typo-body-L-letter-spacing);
}

.mrkt-typo-button {
  font-family: var(--mrkt-typo-button-family);
  font-size: var(--mrkt-typo-button-size);
  font-weight: var(--mrkt-typo-button-weight);
  line-height: var(--mrkt-typo-button-line-height);
  letter-spacing: var(--mrkt-typo-button-letter-spacing);
}

.mrkt-typo-eyebrow {
  font-family: var(--mrkt-typo-eyebrow-family);
  font-size: var(--mrkt-typo-eyebrow-size);
  font-weight: var(--mrkt-typo-eyebrow-weight);
  line-height: var(--mrkt-typo-eyebrow-line-height);
  letter-spacing: var(--mrkt-typo-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.mrkt-typo-h1 {
  font-family: var(--mrkt-typo-h1-family);
  font-size: var(--mrkt-typo-h1-size);
  font-weight: var(--mrkt-typo-h1-weight);
  font-stretch: var(--mrkt-font-heading-stretch);
  line-height: var(--mrkt-typo-h1-line-height);
  letter-spacing: var(--mrkt-typo-h1-letter-spacing);
}

.mrkt-typo-h2 {
  font-family: var(--mrkt-typo-h2-family);
  font-size: var(--mrkt-typo-h2-size);
  font-weight: var(--mrkt-typo-h2-weight);
  font-stretch: var(--mrkt-font-heading-stretch);
  line-height: var(--mrkt-typo-h2-line-height);
  letter-spacing: var(--mrkt-typo-h2-letter-spacing);
}

.mrkt-typo-h3 {
  font-family: var(--mrkt-typo-h3-family);
  font-size: var(--mrkt-typo-h3-size);
  font-weight: var(--mrkt-typo-h3-weight);
  font-stretch: var(--mrkt-font-heading-stretch);
  line-height: var(--mrkt-typo-h3-line-height);
  letter-spacing: var(--mrkt-typo-h3-letter-spacing);
}

.mrkt-typo-h4 {
  font-family: var(--mrkt-typo-h4-family);
  font-size: var(--mrkt-typo-h4-size);
  font-weight: var(--mrkt-typo-h4-weight);
  line-height: var(--mrkt-typo-h4-line-height);
  letter-spacing: var(--mrkt-typo-h4-letter-spacing);
}

.mrkt-typo-h5 {
  font-family: var(--mrkt-typo-h5-family);
  font-size: var(--mrkt-typo-h5-size);
  font-weight: var(--mrkt-typo-h5-weight);
  line-height: var(--mrkt-typo-h5-line-height);
  letter-spacing: var(--mrkt-typo-h5-letter-spacing);
}

.mrkt-typo-h6 {
  font-family: var(--mrkt-typo-h6-family);
  font-size: var(--mrkt-typo-h6-size);
  font-weight: var(--mrkt-typo-h6-weight);
  line-height: var(--mrkt-typo-h6-line-height);
  letter-spacing: var(--mrkt-typo-h6-letter-spacing);
}

/* Tabular mono numerals for specs, item numbers, counters */
.mrkt-typo-mono {
  font-family: var(--mrkt-font-mono);
  font-variant-numeric: tabular-nums;
}