/* Racing Future Academy - CSS Variables (Global) */
/* KRYTYCZNE: Ten plik MUSI być w wwwroot/css/ żeby zmienne działały w CSS Isolation */

:root {
  /* === COLORS === */
  --primary-red: #e62242;
  --dark-gray: #262728;
  --light-gray: #f9f9f9;
  --white: #ffffff;
  --text-gray: #797978;
  --success-green: #4baa58;

  /* === TYPOGRAPHY === */
  --font-headings: "League Spartan", sans-serif;
  --font-ui: "Inter", sans-serif;

  /* === SPACING === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-subtle: 0 2px 4px rgba(38, 39, 40, 0.1);
  --shadow-card: 0 4px 8px rgba(38, 39, 40, 0.15);
  --shadow-elevated: 0 8px 16px rgba(38, 39, 40, 0.2);

  /* === TRANSITIONS === */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;

  /* === BREAKPOINTS === */
  --mobile-max: 767px;
  --tablet-min: 768px;
  --tablet-max: 1399px;
  --desktop-min: 1400px;
  --desktop-target: 1440px;

  /* === CONTAINER WIDTHS === */
  --container-mobile: 345px;
  --container-tablet: 720px;
  --container-desktop: 1152px;
  --container-large: 1440px; /* Container 1440px - 96px padding = 1344px content area */
}