/* Centralized Color CSS Variables - Auto-generated from colors.js */
/* This file should be loaded after colors.js to access the ColorConfig */

:root {
  /* Primary Brand Colors */
  --color-primary-dark: #2B3A5C;
  --color-primary-medium: #3E5486;
  --color-primary-light: #7C92C2;
  --color-primary-lighter: #A4B4D1;

  /* Green Success Colors */
  --color-green-dark: #335C4B;
  --color-green-medium: #49836B;
  --color-green-light: #62A78B;
  --color-green-lighter: #89BDA8;

  /* Purple Accent Colors */
  --color-purple-medium: #6d568F;
  --color-purple-light: #8C76AC;
  --color-purple-lighter: #AC9CC3;

  /* Alert & Warning Colors */
  --color-alert-red: #dc2626;
  --color-alert-red-light: #f87171;
  --color-alert-warning: #f59e0b;
  --color-alert-warning-light: #fbbf24;

  /* Accent & Utility Colors */
  --color-accent-blue-soft: #6B9BD2;
  --color-accent-gray-dark: #1F2937;
  --color-accent-gray-medium: #6B7280;
  --color-accent-gray-light: #9CA3AF;
  --color-accent-gray-lighter: #D1D5DB;
  --color-accent-gray-background: #F3F4F6;
  --color-accent-gray-background-light: #F9FAFB;

  /* Semantic Color Mappings */
  --color-semantic-success: #49836B;
  --color-semantic-success-light: #62A78B;
  --color-semantic-success-lighter: #89BDA8;
  --color-semantic-success-dark: #335C4B;
  --color-semantic-danger: #dc2626;
  --color-semantic-danger-light: #f87171;
  --color-semantic-warning: #f59e0b;
  --color-semantic-warning-light: #fbbf24;
  --color-semantic-info: #7C92C2;
  --color-semantic-info-light: #A4B4D1;
  --color-semantic-info-dark: #2B3A5C;
  --color-semantic-special: #6d568F;
  --color-semantic-special-light: #8C76AC;
  --color-semantic-special-lighter: #AC9CC3;

  /* Legacy Variables for Backward Compatibility */
  --primary-dark: var(--color-primary-dark);
  --primary-medium: var(--color-primary-medium);
  --primary-light: var(--color-primary-light);
  --primary-lighter: var(--color-primary-lighter);
  --green-dark: var(--color-green-dark);
  --green-medium: var(--color-green-medium);
  --green-light: var(--color-green-light);
  --green-lighter: var(--color-green-lighter);
  --purple-medium: var(--color-purple-medium);
  --purple-light: var(--color-purple-light);
  --purple-lighter: var(--color-purple-lighter);
  --red: var(--color-alert-red);
  --red-light: var(--color-alert-red-light);
  --warning: var(--color-alert-warning);
  --blue-soft: var(--color-accent-blue-soft);
}

/* Utility Classes for Common Color Applications */
.color-primary { color: var(--color-primary-dark); }
.color-primary-light { color: var(--color-primary-light); }
.color-success { color: var(--color-semantic-success); }
.color-success-light { color: var(--color-semantic-success-light); }
.color-danger { color: var(--color-semantic-danger); }
.color-warning { color: var(--color-semantic-warning); }
.color-info { color: var(--color-semantic-info); }
.color-special { color: var(--color-semantic-special); }

.bg-primary { background-color: var(--color-primary-dark); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-success { background-color: var(--color-semantic-success); }
.bg-success-light { background-color: var(--color-semantic-success-light); }
.bg-danger { background-color: var(--color-semantic-danger); }
.bg-warning { background-color: var(--color-semantic-warning); }
.bg-info { background-color: var(--color-semantic-info); }
.bg-special { background-color: var(--color-semantic-special); }

/* Border Colors */
.border-primary { border-color: var(--color-primary-dark); }
.border-success { border-color: var(--color-semantic-success); }
.border-danger { border-color: var(--color-semantic-danger); }
.border-warning { border-color: var(--color-semantic-warning); }
.border-info { border-color: var(--color-semantic-info); }
.border-special { border-color: var(--color-semantic-special); }