/**
 * Design System - Color Tokens
 * 
 * All color definitions for the design system.
 * Brand colors are dynamically injected from PHP config, these are the shared colors.
 */

:root {
    /* Neutral Colors - Grayscale */
    --color-white: #ffffff;
    --color-black: #000000;
    
    --color-gray-25: #fafafa;
    --color-gray-50: #f8f9fc;
    --color-gray-100: #f4f4f4;
    --color-gray-200: #efefef;
    --color-gray-300: #d5d5d5;
    --color-gray-400: #bcbcbc;
    --color-gray-500: #7a7a7a;
    --color-gray-600: #919090;
    --color-gray-700: #555555;
    --color-gray-800: #444444;
    --color-gray-900: #474747;
    --color-gray-950: #333333;
    
    /* Semantic Colors - these are injected from design-tokens.php but defined here as fallback */
    --color-success: #04a551;
    --color-success-rgb: 4, 165, 81;
    
    --color-warning: #ffb900;
    --color-warning-rgb: 255, 185, 0;
    
    --color-error: #ed6792;
    --color-error-rgb: 237, 103, 146;
    
    --color-info: #0fb5c8;
    --color-info-rgb: 15, 181, 200;
    
    /* Legacy Support - kept for backwards compatibility */
    --color-orange: var(--color-warning);
    --color-green: var(--color-success);
    
    /* Semantic Aliases */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);
    
    /* Text Colors */
    --text-primary: var(--color-gray-800);
    --text-secondary: var(--color-gray-500);
    --text-muted: var(--color-gray-400);
    --text-inverse: var(--color-white);
    
    /* Background Colors */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-50);
    --bg-tertiary: var(--color-gray-100);
    --bg-overlay: rgba(0, 0, 0, 0.6);
    
    /* Border Colors */
    --border-light: var(--color-gray-200);
    --border-base: var(--color-gray-300);
    --border-dark: var(--color-gray-400);
}