/* Color System for UlmoDigital Web V3 */

:root {
  /* Primary Colors */
  --color-black: #0D0D0D;
  --color-white: #FFFFFF;
  --color-purple: #AF9CEF;
  --color-gray: #1E1E1E;
  --color-lightgray: #CDCDCD;
  
  /* Color Variations */
  --color-black-light: #1A1A1A;
  --color-black-dark: #000000;
  --color-white-dark: #F5F5F5;
  --color-white-light: #FAFAFA;
  --color-purple-light: #C4B5F5;
  --color-purple-dark: #8B7BC7;
  --color-gray-light: #2A2A2A;
  --color-gray-dark: #0F0F0F;
  --color-lightgray-light: #E0E0E0;
  --color-lightgray-dark: #B8B8B8;
  
  /* Semantic Colors */
  --color-primary: var(--color-purple);
  --color-secondary: var(--color-gray);
  --color-background: var(--color-black);
  --color-surface: var(--color-gray);
  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-white-dark);
  --color-text-muted: #CCCCCC;
  
  /* Opacity Variations */
  --color-black-10: rgba(13, 13, 13, 0.1);
  --color-black-20: rgba(13, 13, 13, 0.2);
  --color-black-30: rgba(13, 13, 13, 0.3);
  --color-black-50: rgba(13, 13, 13, 0.5);
  --color-black-70: rgba(13, 13, 13, 0.7);
  --color-black-90: rgba(13, 13, 13, 0.9);
  
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-90: rgba(255, 255, 255, 0.9);
  
  --color-purple-10: rgba(175, 156, 239, 0.1);
  --color-purple-20: rgba(175, 156, 239, 0.2);
  --color-purple-30: rgba(175, 156, 239, 0.3);
  --color-purple-50: rgba(175, 156, 239, 0.5);
  --color-purple-70: rgba(175, 156, 239, 0.7);
  --color-purple-90: rgba(175, 156, 239, 0.9);
  
  --color-lightgray-10: rgba(205, 205, 205, 0.1);
  --color-lightgray-20: rgba(205, 205, 205, 0.2);
  --color-lightgray-30: rgba(205, 205, 205, 0.3);
  --color-lightgray-50: rgba(205, 205, 205, 0.5);
  --color-lightgray-70: rgba(205, 205, 205, 0.7);
  --color-lightgray-90: rgba(205, 205, 205, 0.9);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-gray) 0%, var(--color-gray-light) 100%);
  --gradient-hero: linear-gradient(135deg, var(--color-black) 0%, var(--color-gray) 100%);
}

/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
}

/* Utility Classes */
.bg-black { background-color: var(--color-black); }
.bg-white { background-color: var(--color-white); }
.bg-purple { background-color: var(--color-purple); }
.bg-gray { background-color: var(--color-gray); }
.bg-lightgray { background-color: var(--color-lightgray); }

.text-black { color: var(--color-black); }
.text-white { color: var(--color-white); }
.text-purple { color: var(--color-purple); }
.text-gray { color: var(--color-gray); }
.text-lightgray { color: var(--color-lightgray); }

.border-black { border-color: var(--color-black); }
.border-white { border-color: var(--color-white); }
.border-purple { border-color: var(--color-purple); }
.border-gray { border-color: var(--color-gray); }
.border-lightgray { border-color: var(--color-lightgray); }