/*
  Racing League Tools — design tokens as CSS custom properties.
  Generated by hand from tokens/design-tokens.json v1.0.0 (2026-08-23).
  Do not edit values here directly — edit design-tokens.json, then re-generate this file.
  Framework-agnostic: works under plain ASP.NET Core, MVC, Razor Pages, or Blazor alike.

  Fonts (Saira Condensed, Inter) are NOT declared here as @font-face — self-host the .ttf
  files from racing_league_tools_DESIGN/fonts/Inter,Saira.zip under wwwroot/fonts/ and add
  @font-face rules, or link Google Fonts (both families are available there, OFL-licensed).
*/

:root {
  /* ---- Brand accent colors ---- */
  --color-brand-orange: #F2762E;
  --color-brand-orange-hover: #FF9152;
  --color-brand-green: #2ED47A;
  --color-brand-green-hover: #55DE93;
  --color-brand-mono: #F2F3F5;

  /* ---- Surfaces (dark theme only — there is no light-mode set) ---- */
  --color-surface-canvas: #0B0D12;
  --color-surface-raised: #14161D;
  --color-surface-overlay: #1C1F29;
  --color-surface-card-deep: #0A0B0F;

  /* ---- Border ---- */
  --color-border-hairline: #262B38; /* decorative only — 1.37:1 contrast, do not use as sole focus/interactive indicator */
  --border-hairline-width: 1px;

  /* ---- Text ---- */
  --color-text-primary: #F4F5F7;
  --color-text-secondary: #B9BDC7;
  --color-text-faint: #5B6274;      /* AA-large-text-only, 3.19:1 — do not use for small body copy */
  --color-text-on-accent: #0B0D12;  /* always use this (never light text) on a solid orange/green fill */

  /* ---- Typography families ---- */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;   /* weight 800 */
  --font-display-semicondensed: 'Saira SemiCondensed', sans-serif; /* weight 700 */
  --font-body: 'Inter', system-ui, sans-serif;                     /* weights 400/500/600/700 */

  /* ---- Type scale: fontSize / lineHeight / letterSpacing per step ---- */
  --fs-display-2xl: 96px; --lh-display-2xl: 1.05; --ls-display-2xl: 0.005em;
  --fs-display-xl:  64px; --lh-display-xl:  1.06; --ls-display-xl:  0.005em;
  --fs-display-lg:  48px; --lh-display-lg:  1.06; --ls-display-lg:  0.005em;
  --fs-display-md:  32px; --lh-display-md:  1.08; --ls-display-md:  0.005em;
  --fs-display-sm:  24px; --lh-display-sm:  1.1;  --ls-display-sm:  0.01em;
  --fs-heading-lg:  20px; --lh-heading-lg:  1.2;  --ls-heading-lg:  0.01em;
  --fs-heading-md:  16px; --lh-heading-md:  1.25; --ls-heading-md:  0.01em;
  --fs-body-lg:     16px; --lh-body-lg:     1.5;  --ls-body-lg:     0em;
  --fs-body-md:     14px; --lh-body-md:     1.5;  --ls-body-md:     0em;
  --fs-body-sm:     13px; --lh-body-sm:     1.45; --ls-body-sm:     0em;
  --fs-caption:     12px; --lh-caption:     1.3;  --ls-caption:     0.08em;

  /* ---- Spacing (8px base grid; space-1 is the one deliberate half-step) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sharp: 0px;   /* brand/promo statement pieces only — subscription cards, badges, tier bar */
  --radius-sm: 6px;      /* small interactive controls: inputs, chips, tags */
  --radius-md: 10px;     /* default panels/buttons/cards */
  --radius-lg: 16px;     /* modals, large feature panels */
  --radius-full: 9999px; /* pills, circular crops */
}

/*
  Optional convenience utility classes for the type scale.
  Delete this block if the project already has its own typography-class convention —
  the custom properties above are the actual source of truth, these are just sugar.
*/
.text-display-2xl { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-2xl); line-height: var(--lh-display-2xl); letter-spacing: var(--ls-display-2xl); }
.text-display-xl  { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-xl);  line-height: var(--lh-display-xl);  letter-spacing: var(--ls-display-xl); }
.text-display-lg  { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-lg);  line-height: var(--lh-display-lg);  letter-spacing: var(--ls-display-lg); }
.text-display-md  { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-md);  line-height: var(--lh-display-md);  letter-spacing: var(--ls-display-md); }
.text-display-sm  { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-sm);  line-height: var(--lh-display-sm);  letter-spacing: var(--ls-display-sm); }
.text-heading-lg  { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-heading-lg);  line-height: var(--lh-heading-lg);  letter-spacing: var(--ls-heading-lg); }
.text-heading-md  { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-heading-md);  line-height: var(--lh-heading-md);  letter-spacing: var(--ls-heading-md); }
.text-body-lg     { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.text-body-md     { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-md); line-height: var(--lh-body-md); }
.text-body-sm     { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.text-caption     { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); text-transform: uppercase; }