/**
 * CSS Custom Properties (Variables)
 * 
 * Modern CSS variables to replace SCSS variables.
 * These are available globally and can be overridden per component.
 * 
 * Usage: var(--variable-name)
 */

:root {
  /* Brand Colors */
  --tbc-red: #ff4024;
  --tbc-dark-gray: #333333;
  --tbc-white: #ffffff;
  --tbc-black: #000000;
  
  /* Gray Scale */
  --tbc-gray-1: #f5f5f5;
  --tbc-gray-2: #e0e0e0;
  --tbc-gray-3: #cccccc;
  --tbc-gray-4: #999999;
  
  /* Typography */
  --font-family-base: 'Real Text W01 Semilight', Arial, sans-serif;
  --font-family-light: 'Real Text W01 Light', Arial, sans-serif;
  --font-family-head: 'Real Head W01 Regular', Arial, sans-serif;
  --font-family-head-light: 'Real Head W01 Light', Arial, sans-serif;
  
  /* Font Sizes */
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-x-small: 0.75rem;
  --font-size-large: 1.125rem;
  --font-size-x-large: 1.25rem;
  --font-size-xx-large: 1.5rem;
  
  /* Breakpoints (for use in media queries) */
  --breakpoint-mobile-small: 360px;
  --breakpoint-iphone: 414px;
  --breakpoint-ipad-portrait: 991px;
  --breakpoint-ipad-landscape: 1280px;
  --breakpoint-desktop-small: 992px;
  --breakpoint-desktop-normal: 1920px;
  
  /* Spacing */
  --spacing-base: 1rem;
  --spacing-small: 0.5rem;
  --spacing-large: 1.5rem;
  --spacing-x-large: 2rem;
  
  /* Transitions */
  --transition-base: 100ms ease;
  --transition-slow: 250ms ease;
}

/* Component-specific variable overrides can be scoped */
.call-to-action {
  --cta-bg-color: var(--tbc-red);
  --cta-text-color: var(--tbc-white);
}