/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */

:root {
  /* ---- Brand Colors ---- */
  --color-primary: #B41E23;
  --color-primary-dark: #B41E23;
  --color-primary-hover: #F9E2E2;
  --color-primary-light: #D27679;
  --color-catalog-icon: #C34A4E;

  /* ---- Neutral Colors ---- */
  --color-white: #FFFFFF;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #F7F7F7;
  --color-gray-400: #BDBDBD;
  --color-gray-500: #999999;
  --color-gray-600: #757575;
  --color-gray-700: #ADADAD;
  --color-gray-800: #414141;
  --color-gray-900: #212121;
  --color-footer: #7B7B7B;
  --color-main: #1B1B1C;

  --color-blue: #2373CE;

  /* ---- Level Badge & Type Icons — colors baked into SVGs ---- */

  /* ---- Test Card Header Colors ---- */
  --test-pink: #F8BBD0;
  --test-green: #C8E6C9;
  --test-yellow: #FFF9C4;
  --test-orange: #FFE0B2;

  /* ---- Typography ---- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.6875rem;   /* 11px */
  --font-size-sm: 0.75rem;     /* 12px */
  --font-size-base: 0.875rem;  /* 14px */
  --font-size-md: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 0.75rem;   /* 12px */
  --space-base: 1rem;    /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 2.5rem;   /* 40px */
  --space-3xl: 3rem;     /* 48px */

  /* ---- Border Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 10px;
  --radius-header: 20px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ---- Layout ---- */
  --header-height: 90px;
  --card-width: 200px;
  --card-gap: 16px;
  --container-max: 1200px;

  --border-card: 1px solid #E0E0E0;
  --border-card-hover: 1px solid var(--color-blue);
}