//
// Variables
// --------------------------------------------------

//== Colors
// Theme Palette - Primary: Red, Secondary: Blue, Accent: Green
// Priority usage with WCAG AA accessibility verified
$primary-color: #e30613; // Red - CTAs, buttons, accents (use for large text 18pt+)
$secondary-color: #312783; // Deep Blue - Headings, navigation (excellent contrast)
$third-color: #006f42; // Green - Success states, highlights
$black: #000000; // Black - Body text (highest contrast)

$white: #ffffff; // White - Backgrounds, text on red

//== Accessible Text Colors
// For body text where #E30613 doesn't meet WCAG AA (needs 4.5:1)
$primary-text: #b3050d; // Darker red for body text (5.5:1 contrast)
$secondary-text: #312783; // Blue for headings
$third-text: #005c38; // Darker green for text
$body-text: #000000; // Black for body

//== Background Colors

$secondary-bg: #e6f2ea; // Light green (related to third)


// Light backgrounds using palette colors
// $bg-primary: #ffffff; // White - main background
// $bg-secondary: #f5f5f5; // Light gray
// $bg-tertiary: #eaeaef; // Light blue tint (related to secondary)
// $bg-accent: #fdeeee; // Light red tint (related to primary)

//== Legacy/Supporting Colors (Updated for consistency)
$fourth-color: #1a1a1a; // Near black
$red-dark: #8b0000; // Dark red (related to primary)

// $sixth-color: #004d32; // Forest green (related to third)

$fourth-bg: #eaeaef; // Light blue
$blue-lighter: #4a5daa; // Medium blue
$blue-dark: #1e3a6e; // Navy (related to secondary) 
$background-color_1: #0f1a4a; // Dark blue
$background-color_2: #070d26; // Very dark blue
$background-transparent: transparent;

//== Status Colors
$status-green: #00CC00;
$status-blue: #02BDFF;
$status-orange: #F57F1F;
$status-red: #F04235;
$status-grey: #C8C9BF;


//== Contrast-Safe Color Usage Guide
// Primary (#E30613): Use for buttons, CTAs, large headings (18pt+)
// Secondary (#312783): Use for all text sizes, navigation
// Third (#006F42): Use for success states, highlights
// Text (#000000): Use for body text, paragraphs


// $seventh-color: #1e3a6e; // Navy blue (related to secondary)
// $primary-bg: #312783; // Blue (use secondary instead)
// $primary-blue: #312783; // Use secondary
// $color_blue: #312783; // Use secondary



// $tab1-color: $secondary-color;
// $tab2-color: $third-color;
// $matchbox: $secondary-color;

// $reviews-dot-inactive: $secondary-color;
// $reviews-dot-active: $secondary-color;

// Typography
$font-family-primary: "Raleway", sans-serif;
$font-family-secondary: "nathan", Segoe Script, cursive;
$font-stack: "Raleway", sans-serif;

$base-font-size: 1rem;

// Spacing
$spacing-small: 0.5rem;
$spacing-medium: 1rem;
$spacing-large: 1.5rem;

$media: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1536px,
  3xl: 1920px,
);

// Breakpoints
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;
$breakpoint-xxxl: 1550px;

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 1550px,
);

$h1-size: 4.236rem;
$h2-size: 2.618rem;
$h3-size: 1.618rem;
$h4-size: 1rem;
$h5-size: 0.618rem;
$h6-size: 0.382rem;

$icon-filter: brightness(0) saturate(100%) invert(16%) sepia(64%) saturate(3200%) hue-rotate(238deg) brightness(85%) contrast(105%);
$icon-filter-2: brightness(0) saturate(100%) invert(56%) sepia(72%)
  saturate(337%) hue-rotate(159deg) brightness(95%) contrast(94%);
$icon-filter-3: brightness(0) saturate(100%) invert(14%) sepia(21%)
  saturate(3833%) hue-rotate(174deg) brightness(97%) contrast(103%);