/* Viertallen.Web.Components — brand-tokens en gedeelde siteklassen, geladen door
   Viertallen.Web én Viertallen.Beheer (voorbeeld van het speelschema). */

/* === 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 */
}


/* === gedeelde siteklassen === */

/* Sport-pill (padel/tennis), o.a. op clubkaarten en competitiepagina's.
   Neutrale default zodat onbekende competitietypen ook netjes tonen. */
.vt-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font: 700 11px/1 var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--vt-n-100);
    color: var(--vt-n-600);
}

.vt-pill-padel {
    background: rgba(46, 125, 209, 0.13);
    color: #215F9E;
}

.vt-pill-tennis {
    background: rgba(225, 133, 43, 0.15);
    color: #C56A17;
}

/* Competitiestatus-pills */
.vt-status-open {
    background: var(--vt-lime);
    color: var(--text-on-accent);
}

.vt-status-bezig {
    background: var(--vt-forest-700);
    color: var(--text-inverse);
}