/* ================================================================================================================== *
 * CRO Base Styles - Shared CSS Variables
 * This file contains CSS variables used by all CRO modules
 * ================================================================================================================== */

:root {
    /* =================================================================== */
    /* BRAND COLOR ALIASES (reference theme colors) */
    /* =================================================================== */
    
    /* Primary Brand (Red) */
    --brand-red: var(--color-primary-normal-bg);
    --brand-red-dark: var(--color-primary-active-bg);
    --brand-red-light: var(--color-primary-hover-bg);

    /* Secondary Brand (Navy) */
    --brand-navy: var(--color-secondary-normal-bg);
    --brand-navy-dark: var(--color-secondary-hover-bg);

    /* Third Accent (Green) - NEW */
    --brand-green: var(--color-accent-normal-bg, #10B981);
    --brand-green-hover: var(--color-accent-hover-bg, #059669);
    --brand-green-dark: var(--color-accent-active-bg, #047857);
    --brand-green-light: color-mix(in srgb, var(--color-accent-normal-bg, #10B981) 15%, transparent);
    --brand-green-muted: color-mix(in srgb, var(--color-accent-normal-bg, #10B981) 25%, transparent);
    
    /* Third Accent Outline */
    --brand-green-outline-bg: var(--color-outline-accent-normal-bg, rgba(16, 185, 129, 0.1));
    --brand-green-outline-border: var(--color-outline-accent-normal-border, #10B981);
    --brand-green-outline-fore: var(--color-outline-accent-normal-fore, #10B981);

    /* =================================================================== */
    /* SEMANTIC COLORS (now reference Third Accent for success) */
    /* =================================================================== */
    --success: var(--color-accent-normal-bg, #10B981);
    --success-light: color-mix(in srgb, var(--color-accent-normal-bg, #10B981) 15%, white);
    --success-muted: color-mix(in srgb, var(--color-accent-normal-bg, #10B981) 25%, transparent);
    
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --info: #0EA5E9;
    --info-light: #E0F2FE;

    /* =================================================================== */
    /* NEUTRALS */
    /* =================================================================== */
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-900: #0F172A;

    /* =================================================================== */
    /* SHADOWS (Flat design - minimal shadows) */
    /* =================================================================== */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-xl: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-primary: 0 4px 14px color-mix(in srgb, var(--color-primary-normal-bg) 35%, transparent);
    --shadow-accent: 0 4px 14px color-mix(in srgb, var(--color-accent-normal-bg, #10B981) 35%, transparent);
}