/* 
 * Divinci AI Color Variables
 * Based on style guide and Zola homepage design system
 * Last updated: 2025-07-25
 */

:root {
  /* === CORE COLORS === */
  
  /* Primary Colors (from style guide) */
  --color-accent-primary: #7ba8d1;        /* Light blue - Accent Primary */
  --color-accent-primary-hover: #a8c5a0;  /* Light green - Hover state */
  --color-accent-secondary: #6590b8;      /* Medium blue - Secondary accent */
  --color-accent-tertiary: #90b08a;       /* Medium green - Tertiary accent */
  
  /* Neutral Colors */
  --color-neutral-primary: #2d3c34;       /* Dark green-gray - Primary text */
  --color-neutral-secondary: #7e8d95;     /* Medium gray - Secondary text */
  --color-neutral-tertiary: #666;         /* Medium gray - Tertiary text */
  --color-neutral-inverse: #2d5a4f;       /* Dark forest green - Inverse/dark mode */
  
  /* Background Colors */
  --color-bg-primary: #f8f4f0;            /* Main tan background */
  --color-bg-secondary: #f5f8f6;          /* Light neutral background */
  --color-bg-tertiary: #e8f2f5;           /* Light blue-gray background */
  --color-bg-accent: #cfdcff;             /* Light blue accent background */
  --color-bg-warm: #f7f7f7;               /* Warm light gray */
  
  /* Surface Colors */
  --color-surface-light: #ffffff;         /* Pure white */
  --color-surface-warm: #fafafa;          /* Warm white */
  --color-surface-gray: #f8f9fa;          /* Light gray surface */
  
  /* Border Colors */
  --color-border-light: #e5e5e5;          /* Light border */
  --color-border-medium: #e0e0e0;         /* Medium border */
  --color-border-accent: rgba(123, 168, 209, 0.1); /* Accent border with opacity */
  --color-border-dark: #d4c4a0;           /* Darker border */
  
  /* === SEMANTIC COLORS === */
  
  /* Button Colors */
  --color-btn-primary: var(--color-neutral-inverse);      /* Dark forest green */
  --color-btn-primary-hover: #1e3d35;                     /* Darker forest green */
  --color-btn-secondary: var(--color-accent-primary);     /* Light blue */
  --color-btn-secondary-hover: var(--color-accent-secondary); /* Medium blue */
  --color-btn-accent: var(--color-accent-primary-hover);  /* Light green */
  
  /* Text Colors */
  --color-text-primary: var(--color-neutral-primary);     /* Dark green-gray */
  --color-text-secondary: var(--color-neutral-secondary); /* Medium gray */
  --color-text-tertiary: var(--color-neutral-tertiary);   /* Medium gray */
  --color-text-inverse: var(--color-surface-light);       /* White on dark */
  --color-text-accent: var(--color-accent-primary);       /* Blue accent text */
  --color-text-muted: #999;                               /* Muted gray */
  
  /* Status Colors */
  --color-status-success: #4CAF50;        /* Green for success */
  --color-status-warning: #ffc107;        /* Yellow for warning */
  --color-status-error: #dc3545;          /* Red for error */
  --color-status-info: var(--color-accent-primary); /* Blue for info */
  
  /* === GRADIENTS === */
  
  /* Primary Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-neutral-inverse), var(--color-accent-primary));
  --gradient-secondary: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-primary-hover));
  --gradient-warm: linear-gradient(135deg, #f5f0e6 0%, #e8ddc7 100%);
  --gradient-cool: linear-gradient(135deg, #ede8de 0%, #e0d5bf 100%);
  --gradient-background: linear-gradient(to bottom, var(--color-bg-tertiary), var(--color-bg-secondary));
  
  /* === OPACITY VARIATIONS === */
  
  /* Accent Primary with Opacity */
  --color-accent-primary-10: rgba(123, 168, 209, 0.1);
  --color-accent-primary-20: rgba(123, 168, 209, 0.2);
  --color-accent-primary-30: rgba(123, 168, 209, 0.3);
  --color-accent-primary-50: rgba(123, 168, 209, 0.5);
  --color-accent-primary-70: rgba(123, 168, 209, 0.7);
  
  /* Neutral Inverse with Opacity */
  --color-neutral-inverse-10: rgba(45, 90, 79, 0.1);
  --color-neutral-inverse-20: rgba(45, 90, 79, 0.2);
  --color-neutral-inverse-30: rgba(45, 90, 79, 0.3);
  --color-neutral-inverse-50: rgba(45, 90, 79, 0.5);
  --color-neutral-inverse-70: rgba(45, 90, 79, 0.7);
  
  /* === LEGACY COLORS (for migration) === */
  
  /* Old blue/cyan colors - to be replaced */
  --color-legacy-blue: #16214c;           /* Old primary blue */
  --color-legacy-cyan: #5ce2e7;           /* Old accent cyan */
  --color-legacy-dark-blue: #0e1633;      /* Old dark blue */
  
  /* === SPACING & LAYOUT === */
  
  /* Box Shadows */
  --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-accent: 0 0 10px var(--color-accent-primary-50);
  
  /* Border Radius */
  --radius-small: 6px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-full: 50%;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.4s ease;
}

/* === DARK MODE OVERRIDES === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #2d2d2d;
    --color-surface-light: #333333;
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #cccccc;
    --color-border-light: #444444;
    --color-border-medium: #555555;
  }
}

/* === UTILITY CLASSES === */

/* Background Colors */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-white { background-color: var(--color-surface-light); }
.bg-accent { background-color: var(--color-bg-accent); }

/* Text Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-accent { color: var(--color-text-accent); }
.text-muted { color: var(--color-text-muted); }

/* Border Colors */
.border-light { border-color: var(--color-border-light); }
.border-accent { border-color: var(--color-accent-primary); }