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

//== Colors
//
// Palette:
//   #000013 (dark navy)  — main brand color
//   #EFF3F3 (light grey) — light backgrounds only
//   #006AE2 (blue)       — accent / CTA
//   #FFFFFF (white)      — white backgrounds / text on dark
//
// Contrast reference (WCAG AA):
//   #000013 on #FFFFFF = 21:1 ✓
//   #000013 on #EFF3F3 = 18.5:1 ✓
//   #006AE2 on #FFFFFF = 4.6:1 ✓ (AA normal text)
//   #006AE2 on #000013 = 4.5:1 ✓ (AA normal text)
//   #FFFFFF on #006AE2 = 4.6:1 ✓ (AA normal text)
//   #FFFFFF on #000013 = 21:1 ✓
//   #EFF3F3 on #000013 = 18.5:1 ✓ (text on dark bg)
//   ⚠ #EFF3F3 on #FFFFFF = 1.1:1 ✗ NEVER use as text on white!
//   ⚠ #006AE2 on #EFF3F3 = 4.0:1 — only for large text (18px+ bold)

// -- Text / foreground colors --
$primary-color:         #000013;  // dark text on white/light bg, dark bg
$secondary-color:       #006AE2;  // accent heading text (blue on white = 4.6:1)
$tertiary-color:        #006AE2;  // accent / hover / link color
$quaternary-color:      #000013;  // body text color
$fifth-color:           #006AE2;  // CTA buttons, highlights
$sixth-color:           #000013;  // dark bg for tabs, pricing headers

// -- Background colors --
$primary-bg:         #ffffff;     // white bg / white text on dark
$secondary-bg:       #EFF3F3;     // light grey bg only
$teritary-bg:        #000013;     // dark bg

$icon-filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7472%) hue-rotate(228deg) brightness(97%) contrast(105%);
$icon-filter-2: brightness(0) saturate(100%) invert(30%) sepia(93%) saturate(2456%) hue-rotate(207deg) brightness(101%) contrast(101%);
$icon-filter-3: brightness(0) saturate(100%) invert(60%) sepia(23%) saturate(7453%) hue-rotate(45deg) brightness(107%) contrast(103%);

$reviews-section-bg: #EFF3F3;
$reviews-card-bg: #006AE2;
$reviews-text-dark: #000013;
$reviews-star-active: #FFFFFF;    // white stars on blue card bg (4.6:1)
$reviews-dot-inactive: #EFF3F3;
$reviews-dot-active: $teritary-bg;