/* PWR Racing design tokens.
   Copied verbatim from the design-system handoff bundle:
   _source/pwr-racing-design-system/project/tokens/{colors,typography,spacing,effects}.css
   Do not hand-edit values here — change them upstream and re-copy. */

/* ===== colors ===== */
:root {
  /* --- Primary --- */
  --pwr-hot-pink: #FF0099;
  --pwr-navy: #263855;

  /* --- Secondary --- */
  --pwr-electric-blue: #1800DD;
  --pwr-soft-pink: #FF97D5;
  --pwr-white: #FFFFFF;
  --pwr-black: #000000;

  /* --- Neutrals (derived from the brand book's document furniture) --- */
  --pwr-grey-100: #F4F4F4;
  --pwr-grey-300: #D9D9D9;
  --pwr-grey-500: #8A8A8A;   /* rules, dividers, disabled states — NOT text: 3.45:1 on white */
  --pwr-grey-700: #5A5A5A;

  /* --- Accessibility tint. NOT a brand color: the only permitted use is Hot Pink
         text below 24px on white or light grounds, where #FF0099 measures 3.68:1
         and fails AA. #D60081 measures 5.03:1. Never for fills, logos or large type. --- */
  --pwr-pink-deep: #D60081;

  /* --- Tints of the primaries, for charts and table banding only --- */
  --pwr-navy-800: #1B2A41;
  --pwr-navy-050: #EDF0F5;
  --pwr-pink-050: #FFE9F5;

  /* --- Semantic: text --- */
  --text-primary: var(--pwr-navy);
  --text-secondary: var(--pwr-grey-700);     /* 6.90:1 on white. grey-500 fails AA below 24px */
  --text-accent: var(--pwr-hot-pink);        /* large type only: 24px+, or 18.66px+ bold */
  --text-accent-on-light: var(--pwr-pink-deep);  /* small pink text on white / grey-100 */
  --text-accent-on-dark: var(--pwr-soft-pink);   /* small pink text on navy / black */
  --text-inverse: var(--pwr-white);
  --text-on-pink: var(--pwr-black);          /* 5.71:1. White on Hot Pink is 3.68:1 — display only */
  --text-on-pink-display: var(--pwr-white);  /* 24px+ / 18.66px+ bold on Hot Pink only */
  --text-on-navy: var(--pwr-white);

  /* --- Semantic: surface --- */
  --surface-page: var(--pwr-white);
  --surface-muted: var(--pwr-grey-100);
  --surface-dark: var(--pwr-navy);
  --surface-black: var(--pwr-black);
  --surface-brand: var(--pwr-hot-pink);
  --surface-tint: var(--pwr-soft-pink);

  /* --- Semantic: line --- */
  --border-hairline: var(--pwr-grey-300);
  --border-accent: var(--pwr-hot-pink);
  --border-dark: var(--pwr-navy);

  /* --- Semantic: interactive --- */
  --link: var(--pwr-hot-pink);
  --link-hover: var(--pwr-navy);
  --focus-ring: var(--pwr-electric-blue);

  /* --- Semantic: guidance callouts (do / don't) --- */
  --state-do: #00A651;
  --state-dont: #E53935;
  --state-do-surface: #F1FBF4;
  --state-dont-surface: #FEF4F3;
}

/* ===== typography ===== */
:root {
  /* Families. Anton commands, Nexa (Poppins) informs. */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-body: "Poppins", "Nexa", "Helvetica Neue", Arial, sans-serif;

  /* Weights — Anton ships one weight only. */
  --weight-display: 400;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Scale. Print pt equivalents from the brand book in comments. */
  --type-display: 64px;   /* Anton 48–72pt */
  --type-headline: 34px;  /* Anton 28–36pt */
  --type-subhead: 20px;   /* Anton 16–20pt */
  --type-body-lg: 18px;
  --type-body: 16px;      /* Nexa 10–14pt */
  --type-body-sm: 14px;
  --type-caption: 12px;   /* Nexa 8–9pt */
  --type-eyebrow: 12px;

  /* Slide scale — 1920×1080. Never below 24px on a slide. */
  --type-slide-display: 132px;
  --type-slide-headline: 72px;
  --type-slide-subhead: 40px;
  --type-slide-body: 28px;

  /* Leading */
  --leading-display: 0.92;
  --leading-headline: 1.05;
  --leading-subhead: 1.2;
  --leading-body: 1.6;
  --leading-tight: 1.3;

  /* Tracking */
  --tracking-display: 0.005em;
  /* Hero lockup tracking — Anton at 60px+ only, set tight enough that letters just touch,
     matching the fit of the PWR logo. Never on headline, subhead or body. */
  --tracking-hero: -0.028em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.14em;
  --tracking-label: 0.06em;

  /* Minimum sizes — hard floors from the brand book */
  --min-anton-size: 18px;  /* never set Anton below 18pt */
  --min-body-size: 13px;   /* body copy never below 10pt */
}

/* ===== spacing ===== */
:root {
  /* 4px base. Documents are built on an 8px rhythm. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* Brand furniture */
  --rule-hairline: 1px;
  --rule-accent: 2px;
  --bar-edge: 8px;       /* the pink bar at the top/bottom of a page */
  --tick-width: 6px;     /* the small pink tick that precedes a label */
  --tick-height: 18px;

  /* Page geometry */
  --page-width: 8.5in;
  --page-margin: 0.75in;
  --doc-measure: 68ch;   /* max line length for body copy */

  /* Logo protection: clear space = height of the "R" in RACING */
  --logo-clearspace: 1em;
  --logo-min-width: 80px;
}

/* ===== effects ===== */
:root {
  /* PWR is a flat, hard-edged brand. Square corners are the default. */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-pill: 999px;   /* chips and tags only */

  /* Shadows are for screen UI only. Never on the logo, never in print. */
  --shadow-none: none;
  --shadow-lift: 0 8px 24px rgba(38, 56, 85, 0.12);
  --shadow-press: 0 1px 0 rgba(38, 56, 85, 0.24);

  /* Photo overlays, from the Photography section */
  --overlay-navy: rgba(38, 56, 85, 0.40);
  --overlay-navy-strong: rgba(38, 56, 85, 0.70);
  --overlay-pink: rgba(255, 0, 153, 0.35);
  --overlay-scrim: linear-gradient(180deg, rgba(38,56,85,0) 0%, rgba(38,56,85,0.85) 100%);

  /* Motion — quick and athletic, never bouncy */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}