/* ==========================================================================
   Design tokens — TM Mikrolaser V4
   Brand: Technical Blue, Precision Blue, Black, White · Accent: Burnished Copper
   Type V2: Unbounded (display) + Montserrat (text) — logo artwork untouched.
   ========================================================================== */

/* Self-hosted variable fonts, latin subset only (German needs nothing else). */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/unbounded-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations');
}
/* Metric-adjusted fallbacks reduce layout shift while the web fonts swap in. */
@font-face {
  font-family: 'Unbounded Fallback';
  src: local('Arial Black'), local('Arial Bold'), local('Arial');
  size-adjust: 108%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial');
  size-adjust: 112%;
  ascent-override: 86%;
  descent-override: 22%;
}

:root {
  /* Brand */
  --c-tech: #175c91; /* Technical Blue */
  --c-precision: #0d6fb8; /* Precision Blue */
  --c-black: #000;
  --c-white: #fff;
  --c-copper: #c2763b; /* Burnished Copper — accent lines + intervention cues only */
  --c-copper-light: #e9b98f; /* highlight tint of the copper (shine on CTA border) */
  --c-navy: #0e3a5c; /* deep shade of Technical Blue */
  --c-navy-hover: #0a2c47;
  /* V4 primary CTA: Precision Blue #0D6FB8 — taken from the approved master logo
     (fill of the symbol); white text 5.27:1. Hover = Technical Blue #175C91, 6.9:1. */
  --c-cta: var(--c-precision);
  --c-cta-hover: var(--c-tech);

  /* Neutral support */
  --c-ink: #000;
  --c-steel-700: #2f353b;
  --c-steel-500: #5b636b; /* muted text on white, 6.1:1 */
  --c-steel-300: #aab1b8;
  --c-line: #d9dde1;
  --c-paper: #f2f3f5;
  --c-graphite: #16191c;

  --on-dark-muted: rgb(255 255 255 / 0.76);
  --on-dark-line: rgb(255 255 255 / 0.22);

  /* Type roles */
  --f-display: 'Unbounded', 'Unbounded Fallback', 'Arial Black', sans-serif;
  --f-text: 'Montserrat', 'Montserrat Fallback', 'Segoe UI', Roboto, Arial, sans-serif;

  /* Layout */
  /* V4: shared content width ≈ 1410px on desktop (header, sections, footer);
     the gutters sit outside it. Reading columns are limited separately (--measure). */
  --content: 1410px;
  --gutter: clamp(16px, 4.2vw, 64px);
  --maxw: calc(var(--content) + 2 * var(--gutter));
  --measure: 62ch;
  --col-gap: clamp(16px, 2vw, 32px);
  --section-y: clamp(96px, 11vw, 184px);
  --header-h: 84px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-mid: 320ms;
  --t-slow: 800ms;

  /* V3 geometry: ONE diagonal for every cut on the site (image masks, seams,
     slanted gallery joints, copper hairlines). Rise left-low → right-high like
     the flyer; horizontal run = --diag-k × height (≈ 70° to the horizontal). */
  --diag-k: 0.36;
  --diag-deg: 19.8deg; /* atan(0.36): rotation of a vertical hairline onto the cut */
  --seam: clamp(40px, 6.4vw, 104px); /* height of the diagonal section seams */
  --c-blue-tint: #b8d3ec; /* light tint of Technical Blue for headline accents on blue (flyer) */

  /* Semantic surface tokens (light tone by default; see tones below) */
  --fg: var(--c-ink);
  --fg-2: var(--c-steel-700);
  --fg-muted: var(--c-steel-500);
  --line: var(--c-line);
  --line-strong: var(--c-steel-300);
  --accent: var(--c-tech);
  --mark: var(--c-precision);
  --eyebrow: var(--c-tech);
  --focus: var(--c-precision);
}

/*
 * Tones. V3: every section carries its own solid tone + surface (.tone-*).
 * The V2 full-viewport colour crossfade is retired (grey wash mid-blend);
 * boundaries are now local diagonal seams (components.css, js/seams.js).
 */
.tone-light,
.tone-paper {
  --fg: var(--c-ink);
  --fg-2: var(--c-steel-700);
  --fg-muted: var(--c-steel-500);
  --line: var(--c-line);
  --line-strong: var(--c-steel-300);
  --accent: var(--c-tech);
  --mark: var(--c-precision);
  --eyebrow: var(--c-tech);
  --focus: var(--c-precision);
}
.tone-dark {
  --fg: var(--c-white);
  --fg-2: rgb(255 255 255 / 0.78);
  --fg-muted: rgb(255 255 255 / 0.62);
  --line: rgb(255 255 255 / 0.2);
  --line-strong: rgb(255 255 255 / 0.4);
  --accent: var(--c-precision);
  --mark: var(--c-precision);
  --eyebrow: rgb(255 255 255 / 0.78);
  --focus: var(--c-white);
}
.tone-blue {
  --fg: var(--c-white);
  --fg-2: rgb(255 255 255 / 0.84);
  --fg-muted: rgb(255 255 255 / 0.7);
  --line: rgb(255 255 255 / 0.26);
  --line-strong: rgb(255 255 255 / 0.5);
  --accent: var(--c-blue-tint);
  --mark: var(--c-white);
  --eyebrow: rgb(255 255 255 / 0.84);
  --focus: var(--c-white);
}

@media (max-width: 1179px) {
  :root {
    --header-h: 68px;
  }
}
@media (max-width: 599px) {
  :root {
    --header-h: 60px;
  }
}