/* === tokens/fonts.css === */
/* Viertallen — Fonts
   SUBSTITUTION NOTE: brand's exact wordmark font was not provided. Using
   Google Fonts nearest matches — Archivo (heavy, athletic display) for the
   wordmark/headings, Barlow (sporty grotesque) for body/UI, and JetBrains
   Mono for scores & tabular data. Flag to user; swap when real fonts arrive.
   NB: de fonts worden geladen via een <link> in index.html (geen @import hier). */

/* === tokens/colors.css === */
/* Viertallen — Color tokens
   Derived from the logo: tennis-ball lime, forest green, off-white court.
   RULE: lime/yellow are FILL & ACCENT colors only. Never body text on light.
   Forest green (--vt-forest) is the readable ink. */
:root {
  /* ---- Brand core (straight from logo) ---- */
  --vt-lime: #B4F10A;          /* primary accent — CTA fills, highlights */
  --vt-lime-bright: #DFFF3B;   /* hover / glow */
  --vt-yellow: #F4FF18;        /* peak highlight */
  --vt-laurel: #91C811;        /* secondary green-gold */
  --vt-forest: #233E00;        /* ink, dark surfaces, primary brand dark */

  /* ---- Forest / green neutral scale (green-tinted) ---- */
  --vt-forest-900: #16290A;
  --vt-forest-800: #1D3400;
  --vt-forest-700: #233E00;
  --vt-forest-600: #34590A;
  --vt-forest-500: #4B7413;
  --vt-forest-400: #6C9531;

  /* ---- Court neutrals (warm-green tinted grays) ---- */
  --vt-paper: #FAFFF5;         /* app background */
  --vt-white: #FFFFFF;
  --vt-n-50:  #F1F5EA;
  --vt-n-100: #E6ECDB;
  --vt-n-200: #D3DCC4;
  --vt-n-300: #B4C0A2;
  --vt-n-400: #8B9878;
  --vt-n-500: #67735A;
  --vt-n-600: #4C5642;
  --vt-n-700: #363E2F;
  --vt-n-800: #262C21;
  --vt-n-900: #171B13;

  /* ---- Semantic status ---- */
  --vt-win: #3FA34D;           /* win / positive */
  --vt-live: #E4572E;          /* live / alert */
  --vt-warn: #E8A400;
  --vt-info: #2E7DD1;

  /* ================= SEMANTIC ALIASES ================= */
  /* surfaces */
  --surface-app: var(--vt-paper);
  --surface-card: var(--vt-white);
  --surface-sunken: var(--vt-n-50);
  --surface-inverse: var(--vt-forest-700);
  --surface-accent: var(--vt-lime);

  /* text */
  --text-strong: var(--vt-forest-700);
  --text-body: var(--vt-n-800);
  --text-muted: var(--vt-n-500);
  --text-inverse: var(--vt-paper);
  --text-on-accent: var(--vt-forest-800); /* forest text on lime */
  --text-link: var(--vt-forest-600);
  --text-link-hover: var(--vt-forest-800);

  /* borders */
  --border-subtle: var(--vt-n-200);
  --border-default: var(--vt-n-300);
  --border-strong: var(--vt-forest-700);
  --border-accent: var(--vt-lime);

  /* interactive */
  --accent: var(--vt-lime);
  --accent-hover: var(--vt-lime-bright);
  --accent-press: var(--vt-laurel);
  --focus-ring: var(--vt-forest-600);
}

/* === tokens/typography.css === */
/* Viertallen — Typography tokens */
:root {
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* type scale (1.25 major-third-ish, tuned for sport UI) */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  --fs-6xl: 88px;

  /* line heights */
  --lh-tight: 1.02; /* @kind other */
  --lh-snug: 1.15; /* @kind other */
  --lh-normal: 1.45; /* @kind other */
  --lh-relaxed: 1.6; /* @kind other */

  /* tracking */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.04em; /* @kind other */
  --ls-caps: 0.09em;   /* @kind other */

  /* semantic roles */
  --text-display: var(--fw-black) var(--fs-5xl)/var(--lh-tight) var(--font-display);
  --text-h1: var(--fw-black) var(--fs-3xl)/var(--lh-snug) var(--font-display);
  --text-h2: var(--fw-bold) var(--fs-2xl)/var(--lh-snug) var(--font-display);
  --text-h3: var(--fw-bold) var(--fs-xl)/var(--lh-snug) var(--font-display);
  --text-eyebrow: var(--fw-bold) var(--fs-xs)/1.2 var(--font-body);
  --text-body-md: var(--fw-regular) var(--fs-md)/var(--lh-normal) var(--font-body);
  --text-label: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-body);
}

/* === tokens/layout.css === */
/* Viertallen — Spacing, radius, shadow, motion, layout tokens */
:root {
  /* spacing — 4px base grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* radius — athletic, moderately rounded (echoes the wordmark's soft corners) */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* borders */
  --bw-hair: 1px;
  --bw-1: 1.5px;
  --bw-2: 2px;
  --bw-3: 3px;

  /* shadows — soft, green-tinted, low spread. Sport UI stays crisp. */
  --shadow-xs: 0 1px 2px rgba(35,62,0,0.08);
  --shadow-sm: 0 2px 6px rgba(35,62,0,0.10);
  --shadow-md: 0 6px 18px rgba(35,62,0,0.12);
  --shadow-lg: 0 16px 40px rgba(35,62,0,0.16);
  --shadow-lime: 0 6px 20px rgba(180,241,10,0.45); /* glow for accent CTAs */

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* layout */
  --container: 1200px; /* @kind other */
  --container-narrow: 760px; /* @kind other */
  --header-h: 64px; /* @kind other */
}

/* === tokens/base.css === */
/* Viertallen — light base resets & element defaults.
   Kept minimal so consumers inherit brand type/color without a heavy reset. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--text-body-md);
  color: var(--text-body);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Uppercase eyebrow helper used across the brand */
.vt-eyebrow {
  font: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--vt-forest-500);
}

/* Tabular figures for scores */
.vt-tnum { font-variant-numeric: tabular-nums; }

::selection { background: var(--vt-lime); color: var(--vt-forest-800); }

:focus-visible { outline: var(--bw-2) solid var(--focus-ring); outline-offset: 2px; }

/* === styles.css === */
/* Viertallen Design System — dit bestand is de geflattende bundel van de
   tokens hierboven; de losse tokens/*.css-imports uit de bron zijn hier
   bewust weggelaten (die bestanden bestaan niet in deze app). */

/* === app responsive/keyframes === */
@keyframes vt-toast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes vt-live-dot{0%{box-shadow:0 0 0 0 rgba(228,87,46,.55)}70%{box-shadow:0 0 0 7px rgba(228,87,46,0)}100%{box-shadow:0 0 0 0 rgba(228,87,46,0)}}
@media (max-width:880px){.vt-clubhead{grid-template-columns:1fr!important;gap:22px!important;align-items:start!important}.vt-grid2{grid-template-columns:1fr!important}.vt-detail{grid-template-columns:1fr!important}.vt-detail aside{position:static!important}.vt-sponsorfoot{grid-template-columns:1fr!important;gap:18px!important}.vt-club-h1{font-size:34px!important}.vt-hero-h1{font-size:40px!important}}
@media (max-width:600px){.vt-pad{padding-left:18px!important;padding-right:18px!important}.vt-two{grid-template-columns:1fr!important}.vt-club-h1{font-size:28px!important}.vt-hero-h1{font-size:32px!important}.vt-compshead{flex-wrap:wrap!important}.vt-compshead .vt-hr{display:none!important}}
body{margin:0}