:root {
  --color-primary-50: #E6F2F5;
  --color-primary-100: #CCE5EA;
  --color-primary-200: #99CBD6;
  --color-primary-300: #66B1C1;
  --color-primary-400: #3397AD;
  --color-primary-500: #2E86AB;
  --color-primary-600: #1F7A8C;
  --color-primary-700: #166273;
  --color-primary-800: #0F4C5C;
  --color-primary-900: #093642;

  --color-accent-400: #F05B4F;
  --color-accent-500: #E84C3D;
  --color-accent-600: #D64136;
  --color-accent-700: #B4382F;

  --color-success-500: #2E7D32;
  --color-warning-500: #FFB300;
  --color-error-500: #C62828;
  --color-info-500: #1976D2;

  --color-neutral-50: #FFFFFF;
  --color-neutral-100: #F8F9FA;
  --color-neutral-200: #F3F4F6;
  --color-neutral-300: #E5E7EB;
  --color-neutral-400: #D1D5DB;
  --color-neutral-500: #9CA3AF;
  --color-neutral-600: #6B7280;
  --color-neutral-700: #4B5563;
  --color-neutral-800: #374151;
  --color-neutral-900: #1F2937;

  --opacity-08: 0.08;
  --opacity-12: 0.12;
  --opacity-16: 0.16;
  --opacity-24: 0.24;
  --opacity-40: 0.40;

  --gradient-hero: linear-gradient(135deg, rgba(31, 122, 140, 0.45) 0%, rgba(15, 76, 92, 0.35) 100%);
  --gradient-cta: linear-gradient(135deg, rgba(31, 122, 140, 0.95) 0%, rgba(15, 76, 92, 0.95) 100%);

  --text-on-primary: #FFFFFF;
  --text-on-surface: #1F2937;
  --text-on-dark: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-neutral-50: #0B0F14;
    --color-neutral-100: #12161C;
    --color-neutral-200: #161B22;
    --color-neutral-300: #1C2128;
    --color-neutral-400: #252B33;
    --color-neutral-500: #2E3640;
    --color-neutral-600: #3A4250;
    --color-neutral-700: #475062;
    --color-neutral-800: #55607A;
    --color-neutral-900: #62708F;

    --gradient-hero: linear-gradient(135deg, rgba(31, 122, 140, 0.55) 0%, rgba(9, 54, 66, 0.45) 100%);
    --gradient-cta: linear-gradient(135deg, rgba(31, 122, 140, 0.9) 0%, rgba(9, 54, 66, 0.9) 100%);

    --text-on-surface: #FFFFFF;
  }
}

[data-theme="dark"] {
  --color-neutral-50: #0B0F14;
  --color-neutral-100: #12161C;
  --color-neutral-200: #161B22;
  --color-neutral-300: #1C2128;
  --color-neutral-400: #252B33;
  --color-neutral-500: #2E3640;
  --color-neutral-600: #3A4250;
  --color-neutral-700: #475062;
  --color-neutral-800: #55607A;
  --color-neutral-900: #62708F;
  --gradient-hero: linear-gradient(135deg, rgba(31, 122, 140, 0.55) 0%, rgba(9, 54, 66, 0.45) 100%);
  --gradient-cta: linear-gradient(135deg, rgba(31, 122, 140, 0.9) 0%, rgba(9, 54, 66, 0.9) 100%);
  --text-on-surface: #FFFFFF;
}