/* Academy Racing League — Typography Tokens */

/* ── Web Fonts (Google Fonts — substitutes for brand typeface) ── */
/* NOTE: The "ACADEMY" wordmark uses a custom condensed italic font.
   Barlow Condensed ExtraBold Italic is the closest Google Fonts match.
   Ask the brand team for the original typeface files for pixel-perfect fidelity. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Barlow+Semi+Condensed:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── Font Families ── */
  --font-display:   'Barlow Condensed', 'Arial Narrow', sans-serif;   /* Headlines, wordmarks */
  --font-body:      'Barlow', 'Arial', sans-serif;                    /* Body copy, UI text */
  --font-ui:        'Barlow Semi Condensed', 'Arial', sans-serif;     /* Labels, metadata, nav */
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;       /* Lap times, telemetry, code */

  /* ── Font Sizes ── */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   80px;
  --text-7xl:   96px;

  /* ── Font Weights ── */
  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-extrabold:   800;

  /* ── Line Heights ── */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* ── Letter Spacing ── */
  --tracking-tight:     -0.02em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.16em;  /* Used on "RACING LEAGUE" subtitle style */

  /* ── Semantic Type Roles ── */

  /* Display — hero headlines, wordmark-adjacent text */
  --type-display-font:    var(--font-display);
  --type-display-weight:  var(--weight-extrabold);
  --type-display-style:   italic;
  --type-display-leading: var(--leading-tight);
  --type-display-tracking: var(--tracking-tight);

  /* Heading — section titles, card headers */
  --type-heading-font:    var(--font-display);
  --type-heading-weight:  var(--weight-bold);
  --type-heading-style:   normal;
  --type-heading-leading: var(--leading-snug);

  /* Subheading — labels, category names */
  --type-subheading-font:     var(--font-ui);
  --type-subheading-weight:   var(--weight-semibold);
  --type-subheading-tracking: var(--tracking-wider);
  --type-subheading-transform: uppercase;

  /* Body — paragraphs, descriptions */
  --type-body-font:     var(--font-body);
  --type-body-weight:   var(--weight-regular);
  --type-body-leading:  var(--leading-normal);

  /* UI Label — buttons, tags, nav */
  --type-label-font:     var(--font-ui);
  --type-label-weight:   var(--weight-semibold);
  --type-label-tracking: var(--tracking-wide);
  --type-label-transform: uppercase;

  /* Data/Mono — lap times, iRating, positions */
  --type-mono-font:     var(--font-mono);
  --type-mono-weight:   var(--weight-medium);
  --type-mono-leading:  var(--leading-tight);
}