/* GENERATED by tools/gen-tokens-css.mjs from @sportsnet/ui — do not edit. */
:root {
  --sn-color-brand-red-50: #FFF1F1;
  --sn-color-brand-red-100: #FFE0E0;
  --sn-color-brand-red-200: #FFC2C2;
  --sn-color-brand-red-300: #FF9999;
  --sn-color-brand-red-400: #FF5C5C;
  --sn-color-brand-red-500: #FF0000;
  --sn-color-brand-red-600: #E60000;
  --sn-color-brand-red-700: #B30000;
  --sn-color-brand-red-800: #800000;
  --sn-color-brand-red-900: #4D0000;
  --sn-color-brand-red: #CC0000;
  --sn-color-brand-grey-50: #F2F4F4;
  --sn-color-brand-grey-100: #E2E6E7;
  --sn-color-brand-grey-200: #C2CACC;
  --sn-color-brand-grey-300: #9AA5A8;
  --sn-color-brand-grey-400: #6F7B7E;
  --sn-color-brand-grey-500: #304044;
  --sn-color-brand-grey-600: #26343A;
  --sn-color-brand-grey-700: #1B2528;
  --sn-color-brand-grey-800: #10171A;
  --sn-color-brand-grey-900: #080B0C;
  --sn-color-brand-grey: #304044;
  --sn-color-brand-black: #000000;
  --sn-color-ink-50: #F4F5F5;
  --sn-color-ink-100: #E5E7E8;
  --sn-color-ink-200: #C7CACB;
  --sn-color-ink-300: #9DA3A5;
  --sn-color-ink-400: #6B7376;
  --sn-color-ink-500: #304044;
  --sn-color-ink-600: #26343A;
  --sn-color-ink-700: #1A2528;
  --sn-color-ink-800: #0E1518;
  --sn-color-ink-900: #000000;
  --sn-color-gray-50: #FAFAFA;
  --sn-color-gray-100: #F4F4F5;
  --sn-color-gray-200: #E4E4E7;
  --sn-color-gray-300: #D4D4D8;
  --sn-color-gray-400: #A1A1AA;
  --sn-color-gray-500: #71717A;
  --sn-color-gray-600: #52525B;
  --sn-color-gray-700: #3F3F46;
  --sn-color-gray-800: #27272A;
  --sn-color-gray-900: #18181B;
  --sn-color-gray-950: #09090B;
  --sn-color-primary-50: #FAFAFA;
  --sn-color-primary-100: #F4F4F5;
  --sn-color-primary-200: #E4E4E7;
  --sn-color-primary-300: #D4D4D8;
  --sn-color-primary-400: #A1A1AA;
  --sn-color-primary-500: #71717A;
  --sn-color-primary-600: #52525B;
  --sn-color-primary-700: #3F3F46;
  --sn-color-primary-800: #27272A;
  --sn-color-primary-900: #18181B;
  --sn-color-primary-950: #09090B;
  --sn-color-status-success-light: #d1fae5;
  --sn-color-status-success: #059669;
  --sn-color-status-success-dark: #065f46;
  --sn-color-status-success-bg: #ecfdf5;
  --sn-color-status-success-text: #065f46;
  --sn-color-status-success-badge-bg: #ecfdf5;
  --sn-color-status-success-badge-text: #065f46;
  --sn-color-status-warning-light: #fef3c7;
  --sn-color-status-warning: #d97706;
  --sn-color-status-warning-dark: #92400e;
  --sn-color-status-warning-bg: #fffbeb;
  --sn-color-status-warning-text: #92400e;
  --sn-color-status-warning-badge-bg: #fffbeb;
  --sn-color-status-warning-badge-text: #92400e;
  --sn-color-status-error-light: #FFE0E0;
  --sn-color-status-error: #CC0000;
  --sn-color-status-error-dark: #800000;
  --sn-color-status-error-bg: #FFF1F1;
  --sn-color-status-error-text: #B30000;
  --sn-color-status-error-badge-bg: #FFF1F1;
  --sn-color-status-error-badge-text: #B30000;
  --sn-color-status-info-light: #E2E6E7;
  --sn-color-status-info: #304044;
  --sn-color-status-info-dark: #1B2528;
  --sn-color-status-info-bg: #F2F4F4;
  --sn-color-status-info-text: #1B2528;
  --sn-color-status-info-badge-bg: #F2F4F4;
  --sn-color-status-info-badge-text: #1B2528;
  --sn-color-surface-page: #FAFAFA;
  --sn-color-surface-card: #ffffff;
  --sn-color-surface-muted: #F4F4F5;
  --sn-color-surface-hover: #F4F4F5;
  --sn-color-surface-selected: #FFF1F1;
  --sn-color-surface-overlay: rgba(0, 0, 0, 0.4);
  --sn-color-border: #E4E4E7;
  --sn-color-border-light: #F4F4F5;
  --sn-color-border-dark: #D4D4D8;
  --sn-color-border-focus: #18181B;
  --sn-color-text-primary: #18181B;
  --sn-color-text-secondary: #52525B;
  --sn-color-text-tertiary: #A1A1AA;
  --sn-color-text-muted: #D4D4D8;
  --sn-color-text-inverse: #ffffff;
  --sn-color-text-link: #18181B;
  --sn-radius-sm: 0.25rem;
  --sn-radius-md: 0.375rem;
  --sn-radius-lg: 0.5rem;
  --sn-radius-xl: 0.75rem;
  --sn-radius-full: 9999px;
  --sn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sn-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --sn-font-weight-light: 300;
  --sn-font-weight-normal: 400;
  --sn-font-weight-medium: 500;
  --sn-font-weight-semibold: 600;
  --sn-font-weight-bold: 700;
  --sn-font-weight-black: 900;
  --sn-z-dropdown: 10;
  --sn-z-sticky: 20;
  --sn-z-fixed: 30;
  --sn-z-modalbackdrop: 40;
  --sn-z-modal: 50;
  --sn-z-popover: 60;
  --sn-z-tooltip: 70;
  --sn-z-notification: 80;
}