/* ChopChopGo Official Color Palette - Migrated from Flutter App */

:root {
  /* Tyrian Purple - Primary Color */
  --color-tyrian-purple-100: #120008;
  --color-tyrian-purple-200: #250011;
  --color-tyrian-purple-300: #370019;
  --color-tyrian-purple-400: #490021;
  --color-tyrian-purple-500: #5c0029;
  --color-tyrian-purple-600: #af004f;
  --color-tyrian-purple-700: #ff0475;
  --color-tyrian-purple-800: #ff58a3;
  --color-tyrian-purple-900: #ffabd1;

  /* Persian Pink - Secondary/Accent Color */
  --color-persian-pink-100: #4b0533;
  --color-persian-pink-200: #960a67;
  --color-persian-pink-300: #e00e9a;
  --color-persian-pink-400: #f34bbb;
  --color-persian-pink-500: #f896d8;
  --color-persian-pink-600: #faabdf;
  --color-persian-pink-700: #fbc0e7;
  --color-persian-pink-800: #fcd5ef;
  --color-persian-pink-900: #feeaf7;

  /* Majorelle Blue - Tertiary Color */
  --color-majorelle-blue-100: #0e0834;
  --color-majorelle-blue-200: #1c1068;
  --color-majorelle-blue-300: #2a189c;
  --color-majorelle-blue-400: #3820d0;
  --color-majorelle-blue-500: #5e4ae3;
  --color-majorelle-blue-600: #7f6ee8;
  --color-majorelle-blue-700: #9f92ee;
  --color-majorelle-blue-800: #bfb7f4;
  --color-majorelle-blue-900: #dfdbf9;

  /* Fluorescent Cyan - Accent Color */
  --color-fluorescent-cyan-100: #003030;
  --color-fluorescent-cyan-200: #006060;
  --color-fluorescent-cyan-300: #009090;
  --color-fluorescent-cyan-400: #00c0c0;
  --color-fluorescent-cyan-500: #00f2f2;
  --color-fluorescent-cyan-600: #27ffff;
  --color-fluorescent-cyan-700: #5dffff;
  --color-fluorescent-cyan-800: #93ffff;
  --color-fluorescent-cyan-900: #c9ffff;

  /* Papaya Whip - Background/Surface Color */
  --color-papaya-whip-100: #593c04;
  --color-papaya-whip-200: #b17908;
  --color-papaya-whip-300: #f5ae22;
  --color-papaya-whip-400: #f9cf7b;
  --color-papaya-whip-500: #fdf0d5;
  --color-papaya-whip-600: #fdf2dc;
  --color-papaya-whip-700: #fef5e5;
  --color-papaya-whip-800: #fef9ed;
  --color-papaya-whip-900: #fffcf6;

  /* Semantic Color Assignments - Purple-focused palette */
  --color-primary: var(--color-tyrian-purple-500);
  --color-primary-light: var(--color-tyrian-purple-700);
  --color-primary-dark: var(--color-tyrian-purple-300);
  --color-primary-container: var(--color-tyrian-purple-900);
  
  --color-secondary: var(--color-persian-pink-500);
  --color-secondary-light: var(--color-persian-pink-600);
  --color-secondary-dark: var(--color-persian-pink-400);
  --color-secondary-container: var(--color-persian-pink-800);
  
  --color-tertiary: var(--color-majorelle-blue-500);
  --color-tertiary-light: var(--color-majorelle-blue-600);
  --color-tertiary-dark: var(--color-majorelle-blue-400);
  --color-tertiary-container: var(--color-majorelle-blue-800);
  
  --color-accent: var(--color-fluorescent-cyan-500);
  --color-accent-light: var(--color-fluorescent-cyan-600);
  --color-accent-dark: var(--color-fluorescent-cyan-400);
  
  /* Purple-focused background palette */
  --color-surface: #ffffff;
  --color-surface-container: var(--color-tyrian-purple-900);
  --color-surface-container-high: var(--color-tyrian-purple-800);
  --color-surface-variant: var(--color-persian-pink-900);
  --color-surface-dim: var(--color-majorelle-blue-900);
  
  --color-on-primary: #ffffff;
  --color-on-secondary: var(--color-tyrian-purple-100);
  --color-on-tertiary: #ffffff;
  --color-on-surface: var(--color-tyrian-purple-100);
  --color-on-surface-variant: var(--color-tyrian-purple-200);
  
  --color-outline: var(--color-tyrian-purple-300);
  --color-error: var(--color-tyrian-purple-700);
  --color-on-error: #ffffff;
  
  /* Gradients using official colors */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  --gradient-tertiary: linear-gradient(135deg, var(--color-tertiary) 0%, var(--color-tertiary-dark) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  
  /* Brand specific gradients */
  --gradient-brand-primary: linear-gradient(135deg, var(--color-tyrian-purple-500) 0%, var(--color-persian-pink-400) 100%);
  --gradient-brand-secondary: linear-gradient(135deg, var(--color-persian-pink-500) 0%, var(--color-majorelle-blue-500) 100%);
  --gradient-brand-tertiary: linear-gradient(135deg, var(--color-majorelle-blue-500) 0%, var(--color-fluorescent-cyan-500) 100%);
  
  /* Lighter background gradients for better readability */
  --gradient-background-primary: linear-gradient(135deg, var(--color-tyrian-purple-800) 0%, var(--color-persian-pink-800) 100%);
  --gradient-background-secondary: var(--color-persian-pink-900);
  --gradient-background-tertiary: var(--color-majorelle-blue-900);
  --gradient-background-hero: linear-gradient(135deg, var(--color-tyrian-purple-800) 0%, var(--color-persian-pink-800) 50%, var(--color-majorelle-blue-800) 100%);
}

/* Dark theme color overrides */
[data-theme="dark"] {
  --color-primary: var(--color-tyrian-purple-700);
  --color-primary-container: var(--color-tyrian-purple-300);
  --color-secondary: var(--color-persian-pink-600);
  --color-secondary-container: var(--color-persian-pink-300);
  --color-tertiary: var(--color-majorelle-blue-600);
  --color-tertiary-container: var(--color-majorelle-blue-300);
  --color-surface: var(--color-tyrian-purple-100);
  --color-on-surface: var(--color-papaya-whip-900);
  --color-error: var(--color-tyrian-purple-800);
  --color-on-error: var(--color-tyrian-purple-100);
  --color-outline: var(--color-tyrian-purple-600);
  --color-surface-container-high: var(--color-tyrian-purple-300);
  --color-on-surface-variant: var(--color-papaya-whip-700);
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --color-primary: var(--color-tyrian-purple-400);
    --color-secondary: var(--color-persian-pink-400);
    --color-tertiary: var(--color-majorelle-blue-400);
    --color-outline: var(--color-tyrian-purple-200);
  }
}