/* Color System - IrinoXperience */

:root {
  /* Primary Colors */
  --color-primary: #003057;
  --color-blue: #007FC3;
  --color-orange: #F47421;
  --color-red: #D42A1A;
  
  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-grey: #F4F4F4;
  --color-grey: #9D9D9C;
  --color-blue-5-white: #E9F0F3;
  
  /* Legacy Support - mantengo le variabili esistenti */
  --color-brand: var(--color-primary);
  --color-accent: var(--color-blue);
  --color-brand-ink: #00243f;
  --color-brand-contrast: var(--color-white);
  --color-bg: var(--color-white);
  --color-surface: var(--color-light-grey);
  --color-text: #1a1f2b;
  --color-muted: #667085;
  --color-border: #e6eaf0;
  --color-divider: rgba(157, 157, 156, 0.4);
  
  /* Complex Gradients */
  --gradient-hero-primary: 
    linear-gradient(0deg, rgba(244, 244, 244, 0.15) 0%, rgba(244, 244, 244, 0) 100%),
    linear-gradient(180deg, #007FC3 0%, rgba(0, 127, 195, 0) 100%),
    #003057;
  
  --gradient-hero-secondary:
    linear-gradient(360deg, rgba(0, 48, 87, 0.15) 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 127, 195, 0.20) 0%, rgba(0, 0, 0, 0) 100%),
    var(--color-white);
}

/* Color Utility Classes */
.bg-primary { background-color: var(--color-primary); }
.bg-blue { background-color: var(--color-blue); }
.bg-orange { background-color: var(--color-orange); }
.bg-red { background-color: var(--color-red); }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-light-grey { background-color: var(--color-light-grey); }
.bg-grey { background-color: var(--color-grey); }
.bg-blue-5-white { background-color: var(--color-blue-5-white); }

.text-primary { color: var(--color-primary); }
.text-blue { color: var(--color-blue); }
.text-orange { color: var(--color-orange); }
.text-red { color: var(--color-red); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.text-light-grey { color: var(--color-light-grey); }
.text-grey { color: var(--color-grey); }
.text-blue-5-white { color: var(--color-blue-5-white); }

/* Text Alignment Utilities */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Border Utility Classes */
.border-primary { border-color: var(--color-primary); }
.border-blue { border-color: var(--color-blue); }
.border-orange { border-color: var(--color-orange); }
.border-red { border-color: var(--color-red); }
.border-white { border-color: var(--color-white); }
.border-black { border-color: var(--color-black); }
.border-light-grey { border-color: var(--color-light-grey); }
.border-grey { border-color: var(--color-grey); }

/* Complex Gradient Classes */
.bg-gradient-hero-primary { 
  background: var(--gradient-hero-primary);
  background-blend-mode: normal, multiply, normal;
}

.bg-gradient-hero-secondary { 
  background: var(--gradient-hero-secondary);
  background-blend-mode: normal, multiply, normal;
}

/* Color Variations - Opacity Utilities */
.bg-primary-10 { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); }
.bg-primary-20 { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); }
.bg-primary-50 { background-color: color-mix(in oklab, var(--color-primary) 50%, transparent); }

.bg-blue-10 { background-color: color-mix(in oklab, var(--color-blue) 10%, transparent); }
.bg-blue-20 { background-color: color-mix(in oklab, var(--color-blue) 20%, transparent); }
.bg-blue-50 { background-color: color-mix(in oklab, var(--color-blue) 50%, transparent); }

.bg-orange-10 { background-color: color-mix(in oklab, var(--color-orange) 10%, transparent); }
.bg-orange-20 { background-color: color-mix(in oklab, var(--color-orange) 20%, transparent); }
.bg-orange-50 { background-color: color-mix(in oklab, var(--color-orange) 50%, transparent); }

/* Hover State Variations */
.hover\:bg-primary-dark:hover { background-color: #002743; }
.hover\:bg-blue-dark:hover { background-color: #005a8a; }
.hover\:bg-orange-dark:hover { background-color: #d85a18; }

/* Focus State Variations */
.focus\:border-primary:focus { border-color: var(--color-primary); }
.focus\:border-blue:focus { border-color: var(--color-blue); }
.focus\:ring-primary:focus { 
  outline: 2px solid color-mix(in oklab, var(--color-primary) 40%, transparent); 
}
.focus\:ring-blue:focus { 
  outline: 2px solid color-mix(in oklab, var(--color-blue) 40%, transparent); 
}