// Base color variables
$blue-primary: #3b82f6;
$blue-secondary: #1d4ed8;
$blue-tertiary: #18338c;
$blue-light: #60a5fa;

$green-primary: #10b981;
$green-secondary: #047857;
$green-tertiary: #065f46;
$green-light: #34d399;

$purple-primary: #8b5cf6;
$purple-secondary: #7c3aed;
$purple-tertiary: #3c0d9c;
$purple-light: #a78bfa;

$teal-primary: #06b6d4;
$teal-secondary: #0891b2;
$teal-tertiary: #0e7490;
$teal-light: #22d3ee;

$orange-primary: #f59e0b;
$orange-secondary: #d97706;
$orange-tertiary: #b45309;
$orange-light: #fbbf24;

$indigo-primary: #6366f1;
$indigo-secondary: #4f46e5;
$indigo-tertiary: #4338ca;
$indigo-light: #818cf8;

// Neutral colors
$slate-50: #f8fafc;
$slate-100: #f1f5f9;
$slate-200: #e2e8f0;
$slate-300: #cbd5e1;
$slate-400: #94a3b8;
$slate-500: #64748b;
$slate-600: #475569;
$slate-700: #334155;
$slate-800: #1e293b;
$slate-900: #0f172a;

// Alpha values
$alpha-light: 0.1;
$alpha-medium: 0.2;
$alpha-heavy: 0.3;
$alpha-bg: 0.7;
$alpha-bg-card: 0.8;
$alpha-bg-card-alt: 0.9;
$alpha-bg-card-strong: 0.95;

$skills-light-theme: (
  // Skills section colors
  skills-background: linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%),
  skills-background-pattern:
    radial-gradient(circle at 25% 25%, $blue-primary, transparent 50%),
  gradient-skills-title:
    linear-gradient(90deg, $blue-tertiary, $blue-primary, $green-primary),
  skills-category-bg: rgba($slate-50, $alpha-bg),
  skills-category-border: rgba($slate-400, $alpha-medium),
  skills-category-title-color: $slate-800,
  skills-skill-name-color: $slate-700,
  skills-skill-level-color: $slate-900,
  skills-skill-percentage-color: $slate-600,
  skills-progress-bg: rgba($slate-200, $alpha-bg-card),
  // Card 1 - Web Frameworks (Blue theme)
  skills-category-bg-primary:
    linear-gradient(
      135deg,
      rgba(239, 246, 255, $alpha-bg-card-alt),
      rgba(219, 234, 254, $alpha-bg-card-strong)
    ),
  skills-category-border-primary: rgba($blue-primary, $alpha-medium),
  skills-gradient-primary:
    linear-gradient(
      135deg,
      rgba($blue-primary, $alpha-light),
      rgba($blue-secondary, 0.05)
    ),
  skills-accent-primary: $blue-primary,

  // Card 2 - Styling & Design (Green theme)
  skills-category-bg-secondary:
    linear-gradient(
      135deg,
      rgba(236, 253, 245, $alpha-bg-card-alt),
      rgba(209, 250, 229, $alpha-bg-card-strong)
    ),
  skills-category-border-secondary: rgba($green-primary, $alpha-medium),
  skills-gradient-secondary:
    linear-gradient(
      135deg,
      rgba($green-primary, $alpha-light),
      rgba($green-secondary, 0.05)
    ),
  skills-accent-secondary: $green-primary,

  // Card 3 - Backend Development (Purple theme)
  skills-category-bg-tertiary:
    linear-gradient(
      135deg,
      rgba(245, 243, 255, $alpha-bg-card-alt),
      rgba(237, 233, 254, $alpha-bg-card-strong)
    ),
  skills-category-border-tertiary: rgba($purple-primary, $alpha-medium),
  skills-gradient-tertiary:
    linear-gradient(
      135deg,
      rgba($purple-primary, $alpha-light),
      rgba($purple-secondary, 0.05)
    ),
  skills-accent-tertiary: $purple-primary,

  // Card 4 - Development Tools (Teal theme)
  skills-category-bg-quaternary:
    linear-gradient(
      135deg,
      rgba(240, 253, 250, $alpha-bg-card-alt),
      rgba(204, 251, 241, $alpha-bg-card-strong)
    ),
  skills-category-border-quaternary: rgba($teal-primary, $alpha-medium),
  skills-gradient-quaternary:
    linear-gradient(
      135deg,
      rgba($teal-primary, $alpha-light),
      rgba($teal-secondary, 0.05)
    ),
  skills-accent-quaternary: $teal-primary,

  // Card 5 - Testing & Quality (Orange theme)
  skills-category-bg-quinary:
    linear-gradient(
      135deg,
      rgba(255, 251, 235, $alpha-bg-card-alt),
      rgba(254, 243, 199, $alpha-bg-card-strong)
    ),
  skills-category-border-quinary: rgba($orange-primary, $alpha-medium),
  skills-gradient-quinary:
    linear-gradient(
      135deg,
      rgba($orange-primary, $alpha-light),
      rgba($orange-secondary, 0.05)
    ),
  skills-accent-quinary: $orange-primary,

  // Card 6 - AI-Tools (Indigo theme)
  skills-category-bg-senary:
    linear-gradient(
      135deg,
      rgba(238, 242, 255, $alpha-bg-card-alt),
      rgba(224, 231, 255, $alpha-bg-card-strong)
    ),
  skills-category-border-senary: rgba($indigo-primary, $alpha-medium),
  skills-gradient-senary:
    linear-gradient(
      135deg,
      rgba($indigo-primary, $alpha-light),
      rgba($indigo-secondary, 0.05)
    ),
  skills-accent-senary: $indigo-primary,

  // Progress bar gradients
  skills-progress-primary:
    linear-gradient(90deg, $blue-primary, $blue-secondary, $blue-tertiary),
  skills-progress-secondary:
    linear-gradient(90deg, $green-primary, $green-secondary, $green-tertiary),
  skills-progress-tertiary:
    linear-gradient(90deg, $purple-primary, $purple-tertiary, $purple-secondary),
  skills-progress-quaternary:
    linear-gradient(90deg, $teal-primary, $teal-secondary, $teal-tertiary),
  skills-progress-quinary:
    linear-gradient(90deg, $orange-primary, $orange-secondary, $orange-tertiary),
  skills-progress-senary:
    linear-gradient(90deg, $indigo-primary, $indigo-secondary, $indigo-tertiary)
);

$skills-dark-theme: (
  // Skills section colors
  skills-background: linear-gradient(135deg, $slate-800 0%, #0ea5e9 100%),
  skills-background-pattern:
    radial-gradient(circle at 25% 25%, $blue-tertiary, transparent 50%),
  gradient-skills-title:
    linear-gradient(90deg, $blue-light, $green-light, $purple-light),
  skills-category-bg: rgba($slate-800, $alpha-bg-card),
  skills-category-border: rgba($slate-600, $alpha-heavy),
  skills-category-title-color: #ffffff,
  skills-skill-name-color: #ffffff,
  skills-skill-level-color: #ffffff,
  skills-skill-percentage-color: #ffffff,
  skills-progress-bg: rgba($slate-700, $alpha-bg-card),
  // Dark theme card backgrounds
  skills-category-bg-primary:
    linear-gradient(
      135deg,
      rgba(30, 58, 138, 0.4),
      rgba(29, 78, 216, $alpha-heavy)
    ),
  skills-category-border-primary: rgba($blue-light, $alpha-heavy),
  skills-gradient-primary:
    linear-gradient(
      135deg,
      rgba($blue-light, $alpha-light),
      rgba($blue-primary, 0.05)
    ),
  skills-accent-primary: $blue-light,

  skills-category-bg-secondary:
    linear-gradient(
      135deg,
      rgba(6, 95, 70, 0.4),
      rgba(4, 120, 87, $alpha-heavy)
    ),
  skills-category-border-secondary: rgba($green-light, $alpha-heavy),
  skills-gradient-secondary:
    linear-gradient(
      135deg,
      rgba($green-light, $alpha-light),
      rgba($green-primary, 0.05)
    ),
  skills-accent-secondary: $green-light,

  skills-category-bg-tertiary:
    linear-gradient(
      135deg,
      rgba(88, 28, 135, 0.4),
      rgba(109, 40, 217, $alpha-heavy)
    ),
  skills-category-border-tertiary: rgba($purple-light, $alpha-heavy),
  skills-gradient-tertiary:
    linear-gradient(
      135deg,
      rgba($purple-light, $alpha-light),
      rgba($purple-primary, 0.05)
    ),
  skills-accent-tertiary: $purple-light,

  skills-category-bg-quaternary:
    linear-gradient(
      135deg,
      rgba(15, 118, 110, 0.4),
      rgba(17, 94, 89, $alpha-heavy)
    ),
  skills-category-border-quaternary: rgba($teal-light, $alpha-heavy),
  skills-gradient-quaternary:
    linear-gradient(
      135deg,
      rgba($teal-light, $alpha-light),
      rgba($teal-primary, 0.05)
    ),
  skills-accent-quaternary: $teal-light,

  skills-category-bg-quinary:
    linear-gradient(
      135deg,
      rgba(180, 83, 9, 0.4),
      rgba(217, 119, 6, $alpha-heavy)
    ),
  skills-category-border-quinary: rgba($orange-light, $alpha-heavy),
  skills-gradient-quinary:
    linear-gradient(
      135deg,
      rgba($orange-light, $alpha-light),
      rgba($orange-primary, 0.05)
    ),
  skills-accent-quinary: $orange-light,

  skills-category-bg-senary:
    linear-gradient(
      135deg,
      rgba(67, 56, 202, 0.4),
      rgba(79, 70, 229, $alpha-heavy)
    ),
  skills-category-border-senary: rgba($indigo-light, $alpha-heavy),
  skills-gradient-senary:
    linear-gradient(
      135deg,
      rgba($indigo-light, $alpha-light),
      rgba($indigo-primary, 0.05)
    ),
  skills-accent-senary: $indigo-light,

  // Progress bars for dark theme
  skills-progress-primary:
    linear-gradient(90deg, $blue-light, $blue-primary, $blue-secondary),
  skills-progress-secondary:
    linear-gradient(90deg, $green-light, $green-primary, $green-secondary),
  skills-progress-tertiary:
    linear-gradient(90deg, $purple-light, $purple-primary, $purple-tertiary),
  skills-progress-quaternary:
    linear-gradient(90deg, $teal-light, $teal-primary, $teal-secondary),
  skills-progress-quinary:
    linear-gradient(90deg, $orange-light, $orange-primary, $orange-secondary),
  skills-progress-senary:
    linear-gradient(90deg, $indigo-light, $indigo-primary, $indigo-secondary)
);
