/* ============================================================
   VT Wimpassing — Colors & Type Foundations
   Hobby-Volleyballverein · seit 2004
   ============================================================
   Brand palette sampled directly from the club logo:
   gold #F6B319 · black #0D0D0D · white #FFFFFF
   (übernommen aus dem VT-Wimpassing-Design-System)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Saira:wght@400;500;600;700;800;900&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---------- BRAND COLOR ---------- */
  --gold:        #F6B319;
  --gold-bright: #FFC42E;
  --gold-deep:   #E09A0A;
  --gold-press:  #C9870A;
  --gold-soft:   #FBE3A0;
  --gold-wash:   #FDF6E4;

  /* ---------- INK / NEUTRALS ---------- */
  --black:       #0D0D0D;
  --ink:         #161616;
  --charcoal:    #232323;
  --slate:       #3A3A3A;

  --white:       #FFFFFF;
  --paper:       #FAFAF8;
  --mist:        #F1F1EE;

  --gray-900:    #1A1A1A;
  --gray-700:    #444444;
  --gray-500:    #6E6E6E;
  --gray-400:    #9A9A9A;
  --gray-300:    #C8C8C6;
  --gray-200:    #E4E4E1;
  --gray-100:    #EFEFEC;

  /* ---------- SEMANTIC ---------- */
  --bg:          var(--paper);
  --bg-dark:     var(--black);
  --surface:     var(--white);
  --surface-dark:var(--charcoal);

  --fg:          var(--gray-900);
  --fg-muted:    var(--gray-500);
  --fg-faint:    var(--gray-400);
  --fg-on-dark:  #F4F2ED;
  --fg-on-dark-muted: #A7A49C;
  --fg-on-gold:  #1A1206;

  --accent:      var(--gold);
  --link:        var(--gold-deep);
  --border:      var(--gray-200);
  --border-dark: var(--slate);

  --ok:          #3D9A5B;
  --warn:        #E0820A;
  --error:       #C9483A;

  /* ---------- TYPE FAMILIES ---------- */
  --font-brand:   'Aldrich', 'Saira', sans-serif;
  --font-display: 'Saira', 'Barlow', sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;
  --font-mono:    'Saira', ui-monospace, monospace;

  /* ---------- TYPE SCALE ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.6;

  --tracking-brand: 0.04em;
  --tracking-eyebrow: 0.22em;
  --tracking-tight: -0.01em;

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(13,13,13,0.06), 0 1px 3px rgba(13,13,13,0.08);
  --shadow-md: 0 4px 12px rgba(13,13,13,0.08), 0 2px 4px rgba(13,13,13,0.06);
  --shadow-lg: 0 12px 32px rgba(13,13,13,0.12), 0 4px 8px rgba(13,13,13,0.06);
  --shadow-gold: 0 8px 24px rgba(246,179,25,0.28);
  --ring-gold: 0 0 0 3px rgba(246,179,25,0.35);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */
.brand-mark { font-family: var(--font-brand); letter-spacing: var(--tracking-brand); text-transform: uppercase; line-height: 1; }
.eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold-deep); }
.h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: var(--leading-tight); text-transform: uppercase; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: var(--leading-snug); }
.h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); }
.body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg); }
.small { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.45; color: var(--fg-muted); }
.score { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }