/* ── Copa STIHL 100 — Design tokens ────────────────────────── */

/* Fonts */
@font-face {
  font-family: "STIHL Contraface Display Title";
  src: url("../../assets/fonts/STIHLContrafaceDisplayTitling.woff2") format("woff2");
  font-style: normal; font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: "STIHL Contraface Display Medium";
  src: url("../../assets/fonts/STIHLContrafaceDisplayMedium.woff2") format("woff2");
  font-style: normal; font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: "STIHL Contraface Text";
  src: url("../../assets/fonts/STIHLContrafaceText.woff2") format("woff2");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "STIHL Contraface Text";
  src: url("../../assets/fonts/STIHLContrafaceTextDemi.woff2") format("woff2");
  font-style: normal; font-weight: 500 700; font-display: swap;
}
@font-face {
  font-family: "STIHL Contraface Text";
  src: url("../../assets/fonts/STIHLContrafaceText-Bold.woff2") format("woff2");
  font-style: normal; font-weight: 800 900; font-display: swap;
}

:root {
  /* ── Typography families ─── */
  --font-display: "STIHL Contraface Display Title", Arial, sans-serif;
  --font-body:    "STIHL Contraface Text", Arial, sans-serif;
  --font-mono:    "STIHL Contraface Display Medium", Arial, sans-serif;

  /* ── Brand ─── */
  --stihl-orange:     #F58220;
  --stihl-orange-600: #DB6E11;
  --stihl-orange-700: #B85808;
  --stihl-orange-200: #FBC79A;
  --stihl-orange-50:  #FFF1E2;

  /* ── Neutrals ─── */
  --night-800: #111111;
  --night-700: #1A1A1A;
  --night-600: #242424;
  --night-500: #333333;
  --steel-300: #8A8A8A;
  --steel-200: #B8B8B8;
  --steel-050: #EAEAEA;
  --white:     #FFFFFF;

  /* ── Semantic state ─── */
  --positive: #4CAF50;
  --positive-50: #E8F5E9;
  --warning:  #F5B820;
  --danger:   #E53935;

  /* ── Podium ─── */
  --gold:   #E8B340;
  --silver: #C8C8C8;
  --bronze: #B07744;

  /* ── Radii ─── */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ── Spacing ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --container-max: 1280px;
  --gutter-page: 24px;
  --gutter-page-lg: 48px;

  /* ── Motion ─── */
  --transition-fast: 0.15s ease;
}

/* ── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--night-700);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.05;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ── Section generic ─── */
.copa-section {
  padding: var(--space-9) var(--gutter-page-lg);
  background: #FFFFFF;
}
.copa-section--alt { background: #F7F7F7; }
.copa-section--gradient { background: linear-gradient(180deg, #F7F7F7 0%, #FFFFFF 100%); }
.copa-section--border-top { border-top: 1px solid rgba(0,0,0,0.06); }
.copa-section__inner { max-width: var(--container-max); margin: 0 auto; }

@media (max-width: 640px) {
  .copa-section { padding-left: 20px; padding-right: 20px; }
}