/**
 * Mesher Color System
 *
 * Centralized color definitions using CSS custom properties.
 * Based on colours.css palette with semantic naming.
 *
 * To change the entire color scheme, simply update the values in the :root section.
 * All colors throughout the application will update automatically.
 */

:root {
  /* ===== BASE PALETTE (from colours.css) ===== */
  /* Green Spectrum - Primary Brand Colors */
  --color-dark-spruce: #0e581d;
  --color-turf-green: #28713e;
  --color-sea-green: #428a5e;
  --color-muted-teal: #76bc9f;

  /* Blue Spectrum - Info & Accent Colors */
  --color-steel-blue: #68a5d1;
  --color-steel-azure: #2c4ca0;
  --color-true-cobalt: #00237a;
  --color-french-blue: #173786;

  /* Neutrals */
  --color-white: #f9feff;
  --color-black: #222a42;

  /* ===== SEMANTIC COLORS ===== */
  /* Primary - Main brand color */
  --color-primary: var(--color-sea-green);
  --color-primary-dark: var(--color-turf-green);
  --color-primary-darker: var(--color-dark-spruce);
  --color-primary-light: var(--color-muted-teal);

  /* Success - Same as primary for brand consistency */
  --color-success: var(--color-sea-green);
  --color-success-dark: var(--color-turf-green);
  --color-success-darker: var(--color-dark-spruce);

  /* Info - Blue tones for informational content */
  --color-info: var(--color-steel-blue);
  --color-info-dark: var(--color-steel-azure);
  --color-info-darker: var(--color-true-cobalt);
  --color-info-light: #8bb8dc;

  /* Links */
  --color-link: var(--color-french-blue);
  --color-link-hover: var(--color-steel-azure);

  /* Warning - Keeping existing yellow (not in colours.css) */
  --color-warning: #ffc107;
  --color-warning-dark: #e0a800;
  --color-warning-darker: #c69500;

  /* Danger - Keeping existing red (not in colours.css) */
  --color-danger: #ec250d;
  --color-danger-dark: #c41e0a;
  --color-danger-darker: #9e1e0e;
  --color-danger-light: #fd5d93;

  /* Additional UI Colors */
  --color-info-bright: #1d8cf8;
  --color-info-bright-light: #3ea1f8;
  --color-info-bright-dark: #1171d3;

  --color-warning-light: #ff8d72;
  --color-warning-orange: #ff691f;
  --color-warning-yellow: #ffda36;

  --color-success-bright: #0be881;

  /* Muted colors */
  --color-muted: #6c757d;
  --color-muted-light: #9A9A9A;

  /* Accent */
  --color-accent: var(--color-muted-teal);

  /* ===== GRAYSCALE ===== */
  --color-gray-100: #f6f9fc;
  --color-gray-200: #e9ecef;
  --color-gray-300: #e3e3e3;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #525f7f;
  --color-gray-800: #32325d;
  --color-gray-900: #212529;

  /* Additional grays for UI */
  --color-gray-darker: #333333;
  --color-gray-icon: #808080;
  --color-gray-help: #5a5a5a;
  --color-gray-border: #dcdcdc;
  --color-gray-input: #6b6868;

  /* ===== BACKGROUND COLORS ===== */
  /* Dark theme backgrounds */
  --bg-dark-primary: #1e1e2f;
  --bg-dark-secondary: #2b2b3e;
  --bg-dark-tertiary: #1e1e24;
  --bg-dark-card: #1f1f2f;
  --bg-black: #000000;
  --bg-pure-black: #0c0c0c;

  /* Light theme backgrounds */
  --bg-light-primary: #f5f6fa;
  --bg-light-secondary: #ffffff;
  --bg-light-tertiary: var(--color-gray-100);
  --bg-light-gray: #f8f9fa;
  --bg-light-border: #dee2e6;

  /* ===== OPACITY VARIANTS ===== */
  /* White opacity - full spectrum */
  --opacity-white-05: rgba(255, 255, 255, 0.05);
  --opacity-white-07: rgba(255, 255, 255, 0.07);
  --opacity-white-10: rgba(255, 255, 255, 0.1);
  --opacity-white-15: rgba(255, 255, 255, 0.15);
  --opacity-white-20: rgba(255, 255, 255, 0.2);
  --opacity-white-30: rgba(255, 255, 255, 0.3);
  --opacity-white-40: rgba(255, 255, 255, 0.4);
  --opacity-white-50: rgba(255, 255, 255, 0.5);
  --opacity-white-60: rgba(255, 255, 255, 0.6);
  --opacity-white-65: rgba(255, 255, 255, 0.65);
  --opacity-white-70: rgba(255, 255, 255, 0.7);
  --opacity-white-80: rgba(255, 255, 255, 0.8);
  --opacity-white-90: rgba(255, 255, 255, 0.9);
  --opacity-white-95: rgba(255, 255, 255, 0.95);

  /* Gray opacity */
  --opacity-gray-30: rgba(222, 222, 222, 0.3);
  --opacity-gray-50: rgba(222, 222, 222, 0.5);
  --opacity-gray-80: rgba(222, 222, 222, 0.8);

  /* Black opacity - full spectrum */
  --opacity-black-10: rgba(0, 0, 0, 0.1);
  --opacity-black-20: rgba(0, 0, 0, 0.2);
  --opacity-black-30: rgba(0, 0, 0, 0.3);
  --opacity-black-40: rgba(0, 0, 0, 0.4);
  --opacity-black-50: rgba(0, 0, 0, 0.5);
  --opacity-black-60: rgba(0, 0, 0, 0.6);
  --opacity-black-70: rgba(0, 0, 0, 0.7);
  --opacity-black-80: rgba(0, 0, 0, 0.8);

  /* Primary/Success green opacity (53, 173, 85 = #35ad55) */
  --opacity-primary-10: rgba(53, 173, 85, 0.1);
  --opacity-primary-15: rgba(53, 173, 85, 0.15);
  --opacity-primary-20: rgba(53, 173, 85, 0.2);
  --opacity-primary-30: rgba(53, 173, 85, 0.3);
  --opacity-primary-40: rgba(53, 173, 85, 0.4);
  --opacity-primary-50: rgba(53, 173, 85, 0.5);

  /* Info blue opacity (29, 140, 248 = #1d8cf8) */
  --opacity-info-10: rgba(29, 140, 248, 0.1);
  --opacity-info-15: rgba(29, 140, 248, 0.15);
  --opacity-info-20: rgba(29, 140, 248, 0.2);
  --opacity-info-30: rgba(29, 140, 248, 0.3);
  --opacity-info-40: rgba(29, 140, 248, 0.4);
  --opacity-info-50: rgba(29, 140, 248, 0.5);

  /* Danger red opacity (236, 37, 13 = #ec250d) */
  --opacity-danger-10: rgba(236, 37, 13, 0.1);
  --opacity-danger-15: rgba(236, 37, 13, 0.15);
  --opacity-danger-20: rgba(236, 37, 13, 0.2);
  --opacity-danger-30: rgba(236, 37, 13, 0.3);
  --opacity-danger-40: rgba(236, 37, 13, 0.4);

  /* Danger pink opacity (253, 93, 147 = #fd5d93) */
  --opacity-danger-pink-20: rgba(253, 93, 147, 0.2);

  /* Dark gray opacity (34, 42, 66 = #222a42) for light mode */
  --opacity-dark-02: rgba(34, 42, 66, 0.02);
  --opacity-dark-03: rgba(34, 42, 66, 0.03);
  --opacity-dark-05: rgba(34, 42, 66, 0.05);
  --opacity-dark-10: rgba(34, 42, 66, 0.1);
  --opacity-dark-20: rgba(34, 42, 66, 0.2);
  --opacity-dark-50: rgba(34, 42, 66, 0.5);
  --opacity-dark-60: rgba(34, 42, 66, 0.6);
  --opacity-dark-80: rgba(34, 42, 66, 0.8);
  --opacity-dark-90: rgba(34, 42, 66, 0.9);

  /* ===== GRADIENT COLORS ===== */
  /* Primary Gradients */
  --gradient-primary-start: var(--color-sea-green);
  --gradient-primary-end: var(--color-turf-green);

  /* Success Gradients */
  --gradient-success-start: var(--color-sea-green);
  --gradient-success-end: var(--color-turf-green);

  /* Info Gradients */
  --gradient-info-start: var(--color-steel-blue);
  --gradient-info-end: var(--color-steel-azure);

  /* Danger Gradients */
  --gradient-danger-start: #fd5d93;
  --gradient-danger-end: var(--color-danger);

  /* Warning Gradients */
  --gradient-warning-start: #ff6491;
  --gradient-warning-end: #e91e63;

  /* ===== TEXT COLORS ===== */
  --text-primary: var(--color-white);
  --text-secondary: var(--opacity-white-60);
  --text-muted: var(--opacity-white-40);
  --text-dark: var(--color-gray-900);
  --text-light: var(--color-gray-600);

  /* ===== BORDER COLORS ===== */
  --border-light: var(--opacity-white-10);
  --border-medium: var(--opacity-white-20);
  --border-dark: var(--opacity-black-20);

  /* ===== FORM INPUT COLORS (Dark Theme) ===== */
  --input-bg-dark: #27293d;
  --input-border-dark: #2b3553;
  --input-border-hover-dark: #344675;
  --input-text-dark: rgba(255, 255, 255, 0.8);
  --input-text-bright-dark: rgba(255, 255, 255, 0.9);
  --input-placeholder-dark: rgba(255, 255, 255, 0.6);

  /* ===== FORM INPUT COLORS (Light Theme) ===== */
  --input-bg-light: #ffffff;
  --input-border-light: rgba(29, 37, 59, 0.5);
  --input-border-hover-light: #aaa;
  --input-text-light: #222a42;
  --input-placeholder-light: #6c757d;

  /* ===== DROPDOWN/SELECT SPECIFIC ===== */
  --dropdown-menu-bg-dark: #242c45;
  --dropdown-menu-bg-light: #ffffff;
  --dropdown-menu-border-dark: #2b3553;
  --dropdown-menu-border-light: rgba(29, 37, 59, 0.12);
  --dropdown-item-hover-dark: rgba(255, 255, 255, 0.04);
  --dropdown-item-hover-light: rgba(34, 42, 66, 0.04);
  --dropdown-caret-dark: rgba(255, 255, 255, 0.6);
  --dropdown-caret-light: #6c757d;

  /* ===== FOCUS STATES ===== */
  --input-focus-border: #e14eca;
  --input-focus-shadow: none;

  /* ===== DISABLED STATES ===== */
  --input-disabled-bg-dark: #1e1e2f;
  --input-disabled-text-dark: rgba(255, 255, 255, 0.4);
  --input-disabled-bg-light: #f5f5f5;
  --input-disabled-text-light: #999;

  /* ===== SHADOW COLORS ===== */
  --shadow-primary: rgba(66, 138, 94, 0.4);
  --shadow-success: rgba(66, 138, 94, 0.4);
  --shadow-info: rgba(104, 165, 209, 0.4);
  --shadow-danger: rgba(236, 37, 13, 0.4);
  --shadow-warning: rgba(255, 193, 7, 0.4);
  --shadow-dark: rgba(0, 0, 0, 0.5);

  /* ===== STATE COLORS ===== */
  --state-hover-opacity: 0.8;
  --state-active-opacity: 0.6;
  --state-disabled-opacity: 0.4;

  /* ===== PASSWORD STRENGTH COLORS ===== */
  --color-strength-weak: #ff3e36;
  --color-strength-fair: #ff691f;
  --color-strength-good: #ffda36;
  --color-strength-strong: #0be881;

  /* ===== EMAIL TEMPLATE COLORS ===== */
  /* Bootstrap-compatible colors for email clients */
  --color-email-primary: #0d6efd;
  --color-email-text: #333;
  --color-email-muted: #6c757d;
  --color-email-border: #dee2e6;
  --color-email-bg-light: #f8f9fa;

  /* ===== SOCIAL MEDIA COLORS ===== */
  --color-facebook: #3b5998;
  --color-twitter: #55acee;
  --color-google: #dd4b39;
  --color-instagram: #125688;
  --color-linkedin: #0077b5;
  --color-pinterest: #cc2127;
  --color-youtube: #cd201f;
  --color-github: #333333;
  --color-dribbble: #ea4c89;
  --color-reddit: #ff4500;
  --color-tumblr: #35465c;
  --color-behance: #1769ff;

  /* ===== COMPONENT-SPECIFIC COLORS ===== */
  /* Cards */
  --card-bg-dark: linear-gradient(0deg, #1f1f2f 0%, #2b2b3e 100%);
  --card-shadow: 0 6px 30px var(--shadow-dark);

  /* Badges */
  --badge-success-bg: #28a745;
  --badge-danger-bg: #dc3545;
  --badge-warning-bg: #ffc107;
  --badge-warning-text: #212529;

  /* Buttons */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-hover: var(--color-primary-dark);
  --btn-primary-active: var(--color-primary-darker);
}

/* ===== LIGHT MODE OVERRIDES ===== */
.white-content {
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --text-muted: var(--color-gray-600);

  --bg-dark-primary: var(--bg-light-primary);
  --bg-dark-secondary: var(--bg-light-secondary);
  --bg-dark-card: var(--bg-light-secondary);

  --border-light: var(--border-dark);
  --border-medium: var(--color-gray-300);

  --card-shadow: 0 6px 30px var(--opacity-black-10);

  /* Form inputs - light theme */
  --input-bg-dark: var(--input-bg-light);
  --input-border-dark: var(--input-border-light);
  --input-border-hover-dark: var(--input-border-hover-light);
  --input-text-dark: var(--input-text-light);
  --input-text-bright-dark: var(--input-text-light);
  --input-placeholder-dark: var(--input-placeholder-light);

  /* Dropdowns - light theme */
  --dropdown-menu-bg-dark: var(--dropdown-menu-bg-light);
  --dropdown-menu-border-dark: var(--dropdown-menu-border-light);
  --dropdown-item-hover-dark: var(--dropdown-item-hover-light);
  --dropdown-caret-dark: var(--dropdown-caret-light);

  /* Disabled states - light theme */
  --input-disabled-bg-dark: var(--input-disabled-bg-light);
  --input-disabled-text-dark: var(--input-disabled-text-light);
}

/* ===== UTILITY: Make colors accessible via data attributes ===== */
/* This allows templates to use colors without CSS classes */
[data-color='primary'] { color: var(--color-primary) !important; }
[data-color='success'] { color: var(--color-success) !important; }
[data-color='info'] { color: var(--color-info) !important; }
[data-color='warning'] { color: var(--color-warning) !important; }
[data-color='danger'] { color: var(--color-danger) !important; }

[data-bg='primary'] { background-color: var(--color-primary) !important; }
[data-bg='success'] { background-color: var(--color-success) !important; }
[data-bg='info'] { background-color: var(--color-info) !important; }
[data-bg='warning'] { background-color: var(--color-warning) !important; }
[data-bg='danger'] { background-color: var(--color-danger) !important; }