/* ==================== FLOWCAPTAIN COLOR SYSTEM ==================== */
/* Centralized color definitions for consistent theming */

:root {
  /* ==================== PRIMARY BRAND COLORS ==================== */
  --fc-primary-green: #294A42;          /* Main brand green */
  --fc-primary-green-light: #2a4e44;    /* Lighter variant */
  --fc-primary-green-dark: #254138;     /* Darker variant */
  --fc-primary-green-hover: #2c5146;    /* Hover state */
  
  --fc-accent-yellow: #FFDC63;          /* Brand yellow/gold */
  --fc-accent-yellow-light: #fff3b8;    /* Light yellow */
  --fc-accent-yellow-dark: #f4d03f;     /* Darker yellow */
  --fc-accent-yellow-hover: #f4d03f;    /* Hover state */
  
  /* ==================== SEMANTIC COLORS ==================== */
  --fc-success: #30d158;                /* Success green */
  --fc-success-light: #4ade80;          /* Light success */
  --fc-success-dark: #22c55e;           /* Dark success */
  
  --fc-warning: #ff9f0a;                /* Warning orange */
  --fc-warning-light: #ffb84d;          /* Light warning */
  --fc-warning-dark: #e08900;           /* Dark warning */
  
  --fc-danger: #ff453a;                 /* Error red */
  --fc-danger-light: #ff6b5c;           /* Light error */
  --fc-danger-dark: #e6342a;            /* Dark error */
  
  --fc-info: #007aff;                   /* Info blue */
  --fc-info-light: #4da6ff;             /* Light info */
  --fc-info-dark: #0056cc;              /* Dark info */
  
  /* ==================== NEUTRAL COLORS ==================== */
  --fc-white: #ffffff;                  /* Pure white */
  --fc-gray-50: #f9fafb;                /* Lightest gray */
  --fc-gray-100: #f3f4f6;               /* Very light gray */
  --fc-gray-200: #e5e7eb;               /* Light gray */
  --fc-gray-300: #d1d5db;               /* Medium light gray */
  --fc-gray-400: #9ca3af;               /* Medium gray */
  --fc-gray-500: #6b7280;               /* Medium gray */
  --fc-gray-600: #4b5563;               /* Medium dark gray */
  --fc-gray-700: #374151;               /* Dark gray */
  --fc-gray-800: #1f2937;               /* Very dark gray */
  --fc-gray-900: #111827;               /* Darkest gray */
  --fc-black: #000000;                  /* Pure black */
  
  /* ==================== TEXT COLORS ==================== */
  --fc-text-primary: #1c1c1e;           /* Primary text */
  --fc-text-secondary: #6e6e73;         /* Secondary text */
  --fc-text-muted: #8e8e93;             /* Muted text */
  --fc-text-light: #c7c7cc;             /* Light text */
  --fc-text-white: #ffffff;             /* White text */
  --fc-text-green: #294A42;             /* Green text */
  
  /* ==================== BACKGROUND COLORS ==================== */
  --fc-bg-primary: #f2f2f7;             /* Primary background */
  --fc-bg-secondary: #ffffff;           /* Secondary background */
  --fc-bg-card: rgba(255, 255, 255, 0.8); /* Card background */
  --fc-bg-overlay: rgba(0, 0, 0, 0.5);  /* Overlay background */
  --fc-bg-green: #294A42;               /* Green background */
  --fc-bg-yellow: #FFDC63;              /* Yellow background */
  
  /* ==================== BORDER COLORS ==================== */
  --fc-border-light: rgba(0, 0, 0, 0.05); /* Light border */
  --fc-border-medium: rgba(0, 0, 0, 0.1);  /* Medium border */
  --fc-border-dark: rgba(0, 0, 0, 0.2);    /* Dark border */
  --fc-border-green: #294A42;              /* Green border */
  --fc-border-white: rgba(255, 255, 255, 0.1); /* White border */
  
  /* ==================== SHADOW COLORS ==================== */
  --fc-shadow-light: rgba(0, 0, 0, 0.08);   /* Light shadow */
  --fc-shadow-medium: rgba(0, 0, 0, 0.12);  /* Medium shadow */
  --fc-shadow-heavy: rgba(0, 0, 0, 0.15);   /* Heavy shadow */
  --fc-shadow-green: rgba(41, 74, 66, 0.2); /* Green shadow */
  --fc-shadow-yellow: rgba(255, 220, 99, 0.3); /* Yellow shadow */
}

/* ==================== THEME VARIATIONS ==================== */
/* Light theme (default) */
[data-theme="light"] {
  --fc-bg: var(--fc-bg-primary);
  --fc-text: var(--fc-text-primary);
  --fc-border: var(--fc-border-light);
  --fc-shadow: var(--fc-shadow-light);
}

/* Dark theme support for future implementation */
[data-theme="dark"] {
  --fc-bg: var(--fc-gray-900);
  --fc-text: var(--fc-white);
  --fc-border: var(--fc-gray-700);
  --fc-shadow: rgba(0, 0, 0, 0.3);
  
  --fc-bg-card: rgba(31, 41, 55, 0.8);
  --fc-text-secondary: var(--fc-gray-300);
  --fc-text-muted: var(--fc-gray-400);
}

/* ==================== ICON COLOR FILTERS ==================== */
/* CSS filters to convert black SVG icons to brand colors */
:root {
  /* Green filter for #294A42 */
  --fc-filter-green: invert(18%) sepia(45%) saturate(629%) hue-rotate(125deg) brightness(90%) contrast(94%);
  
  /* Yellow filter for #FFDC63 */
  --fc-filter-yellow: invert(84%) sepia(88%) saturate(406%) hue-rotate(360deg) brightness(108%) contrast(97%);
  
  /* Success filter for #30d158 */
  --fc-filter-success: invert(64%) sepia(98%) saturate(459%) hue-rotate(81deg) brightness(94%) contrast(95%);
  
  /* Warning filter for #ff9f0a */
  --fc-filter-warning: invert(60%) sepia(100%) saturate(2000%) hue-rotate(15deg) brightness(100%) contrast(101%);
  
  /* Danger filter for #ff453a */
  --fc-filter-danger: invert(35%) sepia(95%) saturate(7500%) hue-rotate(350deg) brightness(105%) contrast(95%);
  
  /* Info filter for #007aff */
  --fc-filter-info: invert(35%) sepia(100%) saturate(2000%) hue-rotate(210deg) brightness(105%) contrast(105%);
}

/* ==================== COLOR UTILITY CLASSES ==================== */
/* Text colors */
.text-primary { color: var(--fc-text-primary); }
.text-secondary { color: var(--fc-text-secondary); }
.text-muted { color: var(--fc-text-muted); }
.text-white { color: var(--fc-text-white); }
.text-green { color: var(--fc-primary-green); }
.text-success { color: var(--fc-success); }
.text-warning { color: var(--fc-warning); }
.text-danger { color: var(--fc-danger); }
.text-info { color: var(--fc-info); }

/* Icon filter colors for background-image SVGs */
.icon-filter-green { filter: var(--fc-filter-green); }
.icon-filter-yellow { filter: var(--fc-filter-yellow); }
.icon-filter-success { filter: var(--fc-filter-success); }
.icon-filter-warning { filter: var(--fc-filter-warning); }
.icon-filter-danger { filter: var(--fc-filter-danger); }
.icon-filter-info { filter: var(--fc-filter-info); }

/* Brand-specific icon colors */
.icon-lightning {
  filter: var(--fc-filter-yellow);
}

/* Brand logo styling - higher specificity */
.logo-icon.icon-lightning,
.landing-logo .icon-lightning,
.auth-logo .icon-lightning,
.landing-nav .icon-lightning,
.auth-nav .icon-lightning {
  filter: var(--fc-filter-yellow) !important;
}

/* Background colors */
.bg-primary { background-color: var(--fc-bg-primary); }
.bg-secondary { background-color: var(--fc-bg-secondary); }
.bg-green { background-color: var(--fc-primary-green); }
.bg-yellow { background-color: var(--fc-accent-yellow); }
.bg-success { background-color: var(--fc-success); }
.bg-warning { background-color: var(--fc-warning); }
.bg-danger { background-color: var(--fc-danger); }
.bg-info { background-color: var(--fc-info); }

/* Border colors */
.border-light { border-color: var(--fc-border-light); }
.border-medium { border-color: var(--fc-border-medium); }
.border-green { border-color: var(--fc-primary-green); }
.border-success { border-color: var(--fc-success); }
.border-warning { border-color: var(--fc-warning); }
.border-danger { border-color: var(--fc-danger); }
.border-info { border-color: var(--fc-info); }