/* =========================================================================
   Wanda Diamond League — Colors & Type
   Source: WDL Brand Guidelines v1.4 (2020)
   ========================================================================= */

/* ---------- Web fonts ---------- */
/* Prometo is the principal brand typeface (Adobe Typekit).
   Lato is the official secondary typeface (free on Google Fonts).
   If Prometo is unavailable, fall back to Lato Black for headlines
   and Lato Light for body copy, per the guidelines (p. 24). */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

/* ---- Prometo (uploaded by brand owner) ---- */
/* NOTE: paths below use plugin-relative URLs (../fonts/) instead of the
   design-system source path ('fonts/'). The source file referenced
   'fonts/Prometo.woff2' with a single catch-all weight range; this version
   splits into four individual @font-face blocks (Regular/Light/Bold/Black)
   so browsers can select the correct file per weight without faux-bold/italic. */
@font-face{font-family:'Prometo';src:url('../fonts/Prometo-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Prometo';src:url('../fonts/Prometo-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Prometo';src:url('../fonts/Prometo-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Prometo';src:url('../fonts/Prometo-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root {
  /* =============== BRAND COLORS (brand guidelines p.21) =============== */
  --wdl-dark-blue:    #0E003C;   /* RGB 14, 0, 60  — Pantone 282 */
  --wdl-blue:         #005BAC;   /* RGB 0, 91, 172 — Pantone 2935 — "Wanda Diamond League Blue" */
  --wdl-light-blue:   #00FFFF;   /* RGB 0, 255, 255 — Pantone 2191 */
  --wdl-white:        #FFFFFF;

  /* Derived tones (for UI only — not in the printed guidelines) */
  --wdl-blue-600:     #004A8C;
  --wdl-blue-400:     #2E7ED0;
  --wdl-cyan-600:     #00C8E8;
  --wdl-cyan-300:     #7DFAFF;

  /* =============== DARK THEME (default) =============== */
  --bg-0:   #05002A;   /* deepest */
  --bg-1:   #0E003C;   /* surface base — WDL Dark Blue */
  --bg-2:   #170A4D;   /* raised surface */
  --bg-3:   #221661;   /* hover / subtle */
  --bg-4:   #2E2175;   /* borders / dividers on dark */

  --fg-1:   #FFFFFF;
  --fg-2:   rgba(255,255,255,0.78);
  --fg-3:   rgba(255,255,255,0.56);
  --fg-4:   rgba(255,255,255,0.36);
  --fg-disabled: rgba(255,255,255,0.22);

  --border-1: rgba(255,255,255,0.10);
  --border-2: rgba(255,255,255,0.18);
  --border-strong: rgba(255,255,255,0.32);

  --accent:       var(--wdl-light-blue);
  --accent-fg:    var(--wdl-dark-blue);
  --accent-soft:  rgba(0,255,255,0.14);

  --link:         var(--wdl-cyan-300);
  --link-hover:   var(--wdl-light-blue);

  /* Semantic */
  --live:       #FF3B30;   /* recording red */
  --live-soft:  rgba(255,59,48,0.14);
  --success:    #34D399;
  --warning:    #F5B544;
  --danger:     #FF5A5F;
  --status-error: var(--danger);   /* alias for vmz-athlete-overrides.js var(--status-error) */
  --info:       var(--wdl-light-blue);

  /* =============== TYPE SCALE =============== */
  --font-display: 'Prometo', 'Lato', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Lato', 'Prometo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-80: 80px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;
  --lh-loose: 1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;    /* for Prometo caps labels */
  --tracking-widest: 0.24em;   /* for nav / kicker caps */

  /* =============== SPACING (4px base) =============== */
  --space-0: 0;
  --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;

  /* =============== RADII =============== */
  --radius-0: 0;         /* default — brand is angular */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;       /* cards, inputs */
  --radius-4: 10px;      /* elevated modals */
  --radius-pill: 999px;

  /* =============== SHADOWS =============== */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-glow: 0 0 0 2px rgba(0,255,255,0.35);

  /* Video / media surface — pure black, theme-invariant */
  --video-bg: #000000;

  /* =============== MOTION =============== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ---------- Light theme override ---------- */
[data-theme="light"] {
  --bg-0:   #F4F5F8;
  --bg-1:   #FFFFFF;
  --bg-2:   #F8F9FC;
  --bg-3:   #EEF0F5;
  --bg-4:   #E2E5EE;

  --fg-1:   #0E003C;
  --fg-2:   rgba(14,0,60,0.72);
  --fg-3:   rgba(14,0,60,0.54);
  --fg-4:   rgba(14,0,60,0.36);
  --fg-disabled: rgba(14,0,60,0.22);

  --border-1: rgba(14,0,60,0.08);
  --border-2: rgba(14,0,60,0.14);
  --border-strong: rgba(14,0,60,0.28);

  --accent:     var(--wdl-blue);
  --accent-fg:  #FFFFFF;
  --accent-soft: rgba(0,91,172,0.10);

  --link: var(--wdl-blue);
  --link-hover: var(--wdl-dark-blue);

  --shadow-1: 0 1px 2px rgba(14,0,60,0.08);
  --shadow-2: 0 4px 12px rgba(14,0,60,0.10), 0 0 0 1px rgba(14,0,60,0.04);
  --shadow-3: 0 12px 32px rgba(14,0,60,0.14), 0 0 0 1px rgba(14,0,60,0.06);
}

/* =========================================================================
   Semantic type styles — use these as classes OR mixins
   ========================================================================= */

.wdl-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.wdl-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.wdl-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
}
.wdl-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}
.wdl-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.wdl-kicker,
.wdl-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}
.wdl-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-20);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.wdl-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}
.wdl-body-strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}
.wdl-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  color: var(--fg-3);
}
.wdl-micro {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-11);
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}
.wdl-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}
.wdl-stat {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-56);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}