/* ============================================================
   Atletiekunie Design System — Foundations
   Colors & Type tokens for the Dutch Athletics Federation
   ============================================================ */

/* Inter is the official typeface (sourced from Google Fonts).
   Montserrat is the documented fallback in the production CSS. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:ital,wght@0,500;0,700;0,800;1,700;1,800&display=swap");

:root {
  /* ---------- Brand Colors -------------------------------- */
  /* Signature Atletiekunie Orange. Used for headers, CTAs, links, focus. */
  --au-orange:            #e35300;
  --au-orange-hover:      #ca4a00; /* darker press/hover */
  --au-orange-soft:       #ee7e1f; /* secondary accent / hover surface */
  --au-orange-tint:       #fef1e6; /* very light surface */

  /* Atletiekunie Navy — paired with orange in the logo lockup. */
  --au-navy:              #103960;
  --au-navy-deep:         #144676;

  /* Action red — used for highlights / record-breaking ranks. */
  --au-red:               #da383d;

  /* ---------- Neutrals (from production CSS) -------------- */
  --au-ink:               #15151e; /* primary text */
  --au-ink-deep:          #0b0b0f; /* near-black, footer bg */
  --au-mute:              #68686b; /* secondary text */
  --au-line:              #dedede; /* hairline borders */
  --au-surface:           #f5f5f6; /* card / panel bg */
  --au-surface-2:         #f9f9f9; /* page bg */
  --au-surface-3:         #f9fbfb; /* subtle alt */
  --au-paper:             #ffffff;

  /* ---------- Semantic tokens ----------------------------- */
  --fg-1:                 var(--au-ink);
  --fg-2:                 var(--au-mute);
  --fg-on-orange:         #ffffff;
  --fg-on-navy:           #ffffff;

  --bg-page:              var(--au-paper);
  --bg-muted:             var(--au-surface);
  --bg-brand:             var(--au-orange);
  --bg-brand-dark:        var(--au-navy);
  --bg-ink:               var(--au-ink-deep);

  --border:               var(--au-line);

  --link:                 var(--au-orange);
  --link-hover:           var(--au-orange-hover);

  /* ---------- Typography ---------------------------------- */
  --font-sans:            "Inter", "Montserrat", verdana, sans-serif;
  --font-display:         "Inter", "Montserrat", verdana, sans-serif; /* italic 800 used for hero */

  /* Atletiekunie hero is set in heavy italic uppercase. */
  --tracking-tight:       -0.02em;
  --tracking-normal:      0;
  --tracking-wide:        0.04em;
  --tracking-caps:        0.08em;

  /* Type scale (modular, matches site rhythm) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* ---------- Spacing ------------------------------------- */
  --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;

  /* ---------- Radii --------------------------------------- */
  --r-0:  0px;       /* default — most chrome is hard-edged */
  --r-1:  2px;
  --r-2:  4px;       /* buttons, inputs */
  --r-3:  8px;       /* cards in some surfaces */
  --r-pill: 999px;

  /* ---------- Shadows ------------------------------------- */
  --shadow-1: 0 1px 2px rgba(21, 21, 30, 0.06);
  --shadow-2: 0 4px 12px rgba(21, 21, 30, 0.08);
  --shadow-3: 0 12px 32px rgba(21, 21, 30, 0.12);
  --shadow-overlay: 0 2px 24px rgba(21, 21, 30, 0.18);

  /* ---------- Motion -------------------------------------- */
  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ---------- Layout -------------------------------------- */
  --container:    1280px;
  --container-wide: 1440px;
  --gutter:       24px;
}

/* ===================== Semantic element styles ============== */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  font-size: 16px;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The Atletiekunie hero is set in italic uppercase Inter Black.
   It feels athletic, urgent and a little graphic. */
.au-hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.25rem, 4.2vw, var(--fs-64));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-on-orange);
}

h1, .au-h1 {
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, var(--fs-48));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h2, .au-h2 {
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h3, .au-h3 {
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4, .au-h4 {
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

.au-eyebrow {
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-on-orange);
}

p, .au-body {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  text-wrap: pretty;
}

.au-meta {
  font-size: var(--fs-13);
  color: var(--fg-2);
  letter-spacing: 0.02em;
}

a, .au-link {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease);
}
a:hover, .au-link:hover { color: var(--link-hover); }

/* The link-with-chevron is the canonical "more" CTA on atletiek.nl. */
.au-link-arrow::after {
  content: " ›";
  font-weight: 700;
  margin-left: 4px;
}