@use '../variables' as *;

// Base color variables
$blue-primary: #2563eb;
$blue-secondary: #1d4ed8;
$blue-light: #93c5fd;
$blue-lighter: #dbeafe;
$blue-lightest: #bfdbfe;
$blue-dark: #1e3a8a;
$blue-darker: #1e40af;

$green-primary: #16a34a;
$green-secondary: #15803d;
$green-light: #86efac;
$green-lighter: #dcfce7;
$green-lightest: #bbf7d0;
$green-dark: #14532d;
$green-darker: #166534;

$teal-primary: #0d9488;
$teal-secondary: #073c39;
$teal-light: #5eead4;
$teal-lighter: #ccfbf1;
$teal-lightest: #99f6e4;
$teal-dark: #134e4a;
$teal-darker: #115e59;

$purple-primary: #9333ea;
$purple-secondary: #3c0d9c;
$purple-light: #c4b5fd;
$purple-lighter: #e9d5ff;
$purple-lightest: #ddd6fe;
$purple-dark: #581c87;
$purple-darker: #6b21a8;

// Background colors
$hero-bg-light-start: #e0e7ef;
$hero-bg-light-end: #91c5e0;

// Alpha values
$alpha-bg-low: 0.3;

// WCAG AAA compliant text colors
$text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds
$text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds

$hero-light-theme: (
  hero-background:
    linear-gradient(135deg, $hero-bg-light-start 0%, $hero-bg-light-end 100%),
  // Stat colors - FIXED for AAA contrast
  stat-primary-bg: linear-gradient(135deg, $blue-lighter, $blue-lightest),
  stat-primary-value: $text-aaa-light,
  // Changed from $blue-primary for AAA contrast
  stat-primary-label: $text-aaa-light,

  // Changed from $blue-secondary for AAA contrast
  stat-secondary-bg: linear-gradient(135deg, $green-lighter, $green-lightest),
  stat-secondary-value: $text-aaa-light,
  // Changed from $green-primary for AAA contrast
  stat-secondary-label: $text-aaa-light,

  // Changed from $green-secondary for AAA contrast
  stat-tertiary-bg: linear-gradient(135deg, $teal-lighter, $teal-lightest),
  stat-tertiary-value: $text-aaa-light,
  // Changed from $teal-primary for AAA contrast
  stat-tertiary-label: $text-aaa-light,

  // Changed from $teal-secondary for AAA contrast
  stat-quaternary-bg: linear-gradient(
      135deg,
      $purple-lighter,
      $purple-lightest
    ),
  stat-quaternary-value: $text-aaa-light,
  // Changed from $purple-primary for AAA contrast
  stat-quaternary-label: $text-aaa-light,
  // Changed from $purple-secondary for AAA contrast
);

$hero-dark-theme: (
  hero-background:
    linear-gradient(
      135deg,
      rgba($blue-dark, $alpha-bg-low) 0%,
      rgba($purple-dark, $alpha-bg-low) 50%,
      rgba($purple-darker, $alpha-bg-low) 100%
    ),
  // Stat colors - Enhanced contrast for AAA compliance
  stat-primary-bg:
    linear-gradient(
      135deg,
      rgba($blue-dark, $alpha-bg-low),
      rgba($blue-darker, $alpha-bg-low)
    ),
  stat-primary-value: $text-aaa-dark,
  // Changed from $blue-primary to white for AAA contrast
  stat-primary-label: $text-aaa-dark,

  // Changed from $blue-light to white for better contrast
  stat-secondary-bg:
    linear-gradient(
      135deg,
      rgba($green-dark, $alpha-bg-low),
      rgba($green-darker, $alpha-bg-low)
    ),
  stat-secondary-value: $text-aaa-dark,
  // Changed from $green-primary to white for AAA contrast
  stat-secondary-label: $text-aaa-dark,

  // Changed from $green-light to white for better contrast
  stat-tertiary-bg:
    linear-gradient(
      135deg,
      rgba($teal-dark, $alpha-bg-low),
      rgba($teal-darker, $alpha-bg-low)
    ),
  stat-tertiary-value: $text-aaa-dark,
  // Changed from $teal-primary to white for AAA contrast
  stat-tertiary-label: $text-aaa-dark,

  // Changed from $teal-light to white for better contrast
  stat-quaternary-bg:
    linear-gradient(
      135deg,
      rgba($purple-dark, $alpha-bg-low),
      rgba($purple-darker, $alpha-bg-low)
    ),
  stat-quaternary-value: $text-aaa-dark,
  // Changed from $purple-primary to white for AAA contrast
  stat-quaternary-label: $text-aaa-dark,
  // Changed from $purple-light to white for better contrast
);