/* MeyerSolutions Theme Colors */
:root {
  /* Primary Colors */
  --color-primary: #135bec;
  --color-primary-hover: #0e4bc9;

  /* Background Colors */
  --color-bg-light: #f6f6f8;
  --color-bg-dark: #101622;
  --color-bg-dark-secondary: #1A2233;
  --color-bg-dark-tertiary: #20293e;
  --color-bg-footer: #0A0E1A;

  /* Text Colors */
  --color-text-white: #ffffff;
  --color-text-white-80: rgba(255, 255, 255, 0.8);
  --color-text-white-70: rgba(255, 255, 255, 0.7);
  --color-text-white-60: rgba(255, 255, 255, 0.6);

  /* Border Colors */
  --color-border-white-10: rgba(255, 255, 255, 0.1);
  --color-border-white-20: rgba(255, 255, 255, 0.2);

  /* Shadow & Opacity */
  --opacity-hover: 0.9;

  /* Spacing & Layout */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  /* Border Radius */
  --radius-default: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Semantic Colors */
  --color-success: #10b981;
  --color-success-bg: rgba(16, 185, 129, 0.2);
  --color-success-border: #059669;
  --color-error: #ef4444;
  --color-error-bg: rgba(239, 68, 68, 0.2);
  --color-error-border: #dc2626;
  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.2);
  --color-warning-border: #d97706;
  --color-info: #3b82f6;
  --color-info-bg: rgba(59, 130, 246, 0.2);
  --color-info-border: #2563eb;
}

/* Material Symbols Icons Configuration */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Base Styles */
body {
  font-family: 'Manrope', sans-serif;
  background-color: var(--color-bg-light);
}

body.dark {
  background-color: var(--color-bg-dark);
}

/* Utility Classes */
.bg-primary {
  background-color: var(--color-primary);
}

.text-primary {
  color: var(--color-primary);
}

.bg-dark-secondary {
  background-color: var(--color-bg-dark-secondary);
}

.bg-dark-tertiary {
  background-color: var(--color-bg-dark-tertiary);
}

.bg-footer {
  background-color: var(--color-bg-footer);
}

.text-white {
  color: var(--color-text-white);
}

.text-white-80 {
  color: var(--color-text-white-80);
}

.text-white-70 {
  color: var(--color-text-white-70);
}

.text-white-60 {
  color: var(--color-text-white-60);
}

.border-white-10 {
  border-color: var(--color-border-white-10);
}

/* Semantic Color Utilities */
.text-success {
  color: var(--color-success);
}

.bg-success {
  background-color: var(--color-success-bg);
}

.border-success {
  border-color: var(--color-success-border);
}

.text-error {
  color: var(--color-error);
}

.bg-error {
  background-color: var(--color-error-bg);
}

.border-error {
  border-color: var(--color-error-border);
}

.text-warning {
  color: var(--color-warning);
}

.bg-warning {
  background-color: var(--color-warning-bg);
}

.border-warning {
  border-color: var(--color-warning-border);
}

.text-info {
  color: var(--color-info);
}

.bg-info {
  background-color: var(--color-info-bg);
}

.border-info {
  border-color: var(--color-info-border);
}

/* Hover Effects */
.hover-primary:hover {
  background-color: var(--color-primary-hover);
}

.hover-opacity:hover {
  opacity: var(--opacity-hover);
}

.transition-colors {
  transition: color 0.2s ease-in-out;
}

.transition-opacity {
  transition: opacity 0.2s ease-in-out;
}

.transition-all {
  transition: all 0.3s ease-in-out;
}