/* ==========================================================================
   Design tokens — "Messlinie" system (Laser Experts Germany)
   Black / white / graphite + Laser Experts yellow as the only accent.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Colour ----------------------------------------------------------- */
  /* Laser Experts brand yellow (#FFC700, confirmed by the client). Used for
     CTAs, active states, markers and key values; as text on white only for the heading highlight
     (.hl, client decision — fails WCAG contrast). */
  --c-signal: #ffc700;
  --c-signal-strong: #e6b300;
  --c-signal-soft: #fff6d6;

  --c-ink: #0e0f11;          /* near-black: dark sections, primary text */
  --c-ink-2: #17191c;        /* raised dark surface */
  --c-graphite: #2a2d32;     /* dark borders, secondary dark surface */
  --c-steel: #5b6068;        /* secondary text on light (≈6.3:1 on white) */
  --c-steel-light: #a3a8af;  /* secondary text on dark (≈8:1 on ink) */
  --c-line: #dcdee1;         /* hairlines on light */
  --c-line-dark: #34373c;    /* hairlines on dark */
  --c-paper: #ffffff;
  --c-paper-2: #f4f4f2;      /* off-white technical paper */
  --c-error: #b3261e;
  --c-success: #1e6b3a;

  /* --- Typography ------------------------------------------------------- */
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Fluid type scale (min at 320px, max at 1440px) */
  --fs-xs: 0.8125rem;                                   /* 13px labels */
  --fs-sm: 0.9375rem;                                   /* 15px */
  --fs-base: 1.0625rem;                                 /* 17px body */
  --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-2xl: clamp(2.125rem, 1.5rem + 3vw, 4.25rem);
  --fs-hero: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.6;

  /* --- Spacing (8px base) ---------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 4vw, 6rem);

  /* --- Layout ----------------------------------------------------------- */
  --container: 80rem;        /* 1280px */
  --container-narrow: 48rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --header-h: 4.5rem;

  /* --- Shape & depth ---------------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --shadow-1: 0 1px 2px rgb(14 15 17 / 0.06), 0 4px 16px rgb(14 15 17 / 0.06);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 720ms;

  --focus-ring: 0 0 0 3px var(--c-paper), 0 0 0 5px var(--c-ink);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}