/**
 * AACTEWA Design Tokens
 * Single source of truth for brand colors and typography.
 */

:root {
    /* Brand Colors */
    --color-primary-600: #15803D;
    --color-primary-700: #166534;
    --color-primary-50: #F0FDF4;

    --color-secondary-600: #1D4ED8;
    --color-secondary-700: #1E40AF;
    --color-secondary-50: #EFF6FF;

    /* Neutral */
    --color-bg: #F9FAFB;
    --color-surface: #FFFFFF;
    --color-border: #E5E7EB;
    --color-text: #111827;
    --color-text-muted: #4B5563;

    /* Status */
    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-danger: #DC2626;
    --color-info: #2563EB;
    --color-disabled: #9CA3AF;
    --color-success-hover: #15803D;
    --color-warning-hover: #D97706;
    --color-danger-hover: #B91C1C;

    /* Status backgrounds/borders */
    --color-success-bg: #DCFCE7;
    --color-success-border: #BBF7D0;
    --color-warning-bg: #FEF3C7;
    --color-warning-border: #FDE68A;
    --color-danger-bg: #FEE2E2;
    --color-danger-border: #FECACA;
    --color-info-bg: #DBEAFE;
    --color-info-border: #BFDBFE;

    /* Role accents (default: navy for admin/manager) */
    --color-role-accent: var(--color-secondary-600);
    --color-role-accent-hover: var(--color-secondary-700);
    --color-role-accent-rgb: 29 78 216;

    /* Legacy aliases for existing CSS */
    --color-primary: var(--color-primary-600);
    --color-primary-dark: var(--color-primary-700);
    --color-primary-light: var(--color-primary-50);
    --color-secondary: var(--color-secondary-600);
    --color-secondary-dark: var(--color-secondary-700);

    --color-gray-50: var(--color-bg);
    --color-gray-100: var(--color-bg);
    --color-gray-200: var(--color-border);
    --color-gray-300: var(--color-border);
    --color-gray-400: var(--color-disabled);
    --color-gray-500: var(--color-text-muted);
    --color-gray-600: var(--color-text-muted);
    --color-gray-700: var(--color-text-muted);
    --color-gray-800: var(--color-text);
    --color-gray-900: var(--color-text);

    /* RGB helpers */
    --color-primary-600-rgb: 21 128 61;
    --color-secondary-600-rgb: 29 78 216;
    --color-danger-rgb: 220 38 38;
    --color-surface-rgb: 255 255 255;
    --color-text-rgb: 17 24 39;

    /* Spacing */
    --spacing-unit: 0.25rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* Z-Index Scale */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-tooltip: 60;
    --z-toast: 70;
}

html {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.5;
}