/*
 * AIM Design System - Color Tokens v3.0
 * Foundation color tokens for consistent theming across the platform
 * Framework independent, semantic color system
 */

:root {
    /* ===========================
       PRIMITIVE COLOR TOKENS
       Base colors that never change
       =========================== */

    /* Neutrals - Pure tones */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-transparent: transparent;

    /* Gray Scale - Core neutrals */
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #eeeeee;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #bdbdbd;
    --color-gray-500: #9e9e9e;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;

    /* Brand Foundation */
    --color-aim-primary: #1E3A5F;      /* Deep professional blue */
    --color-aim-secondary: #4378B5;     /* Accessible blue */
    --color-aim-accent: #3A6799;        /* Interactive blue */
    --color-aim-light: #E7F3FF;         /* Light brand tint */

    /* Success Palette */
    --color-success-50: #f0f9f5;
    --color-success-100: #dcf4e6;
    --color-success-200: #bbebcf;
    --color-success-300: #86daa8;
    --color-success-500: #10B981;
    --color-success-600: #1e7e34;
    --color-success-700: #155724;
    --color-success-900: #0a2e13;

    /* Warning Palette */
    --color-warning-50: #fffdf0;
    --color-warning-100: #fefcdc;
    --color-warning-200: #fef7b9;
    --color-warning-300: #fded86;
    --color-warning-500: #F59E0B;
    --color-warning-600: #d39e00;
    --color-warning-700: #a67c00;
    --color-warning-900: #4d3900;

    /* Error/Danger Palette */
    --color-error-50: #fdf2f2;
    --color-error-100: #fce4e4;
    --color-error-200: #f8cecd;
    --color-error-300: #f2a8a6;
    --color-error-500: #EF4444;
    --color-error-600: #b02a37;
    --color-error-700: #861e2d;
    --color-error-900: #3a0d14;

    /* Info Palette */
    --color-info-50: #f0f9ff;
    --color-info-100: #e0f2fe;
    --color-info-200: #bae6fd;
    --color-info-300: #7dd3fc;
    --color-info-500: #0EA5E9;
    --color-info-600: #138496;
    --color-info-700: #0f6674;
    --color-info-900: #0a2e35;

    /* ===========================
       SEMANTIC COLOR TOKENS
       Meaningful colors tied to function
       =========================== */

    /* Primary Brand Colors */
    --color-primary: var(--color-aim-primary);
    --color-primary-hover: var(--color-aim-accent);
    --color-primary-active: var(--color-aim-secondary);
    --color-primary-light: var(--color-aim-light);

    /* Background System */
    --color-bg-page: var(--color-gray-50);          /* Main page background */
    --color-bg-surface: var(--color-white);         /* Card/panel backgrounds */
    --color-bg-surface-hover: var(--color-gray-100);
    --color-bg-muted: var(--color-gray-200);        /* Subdued backgrounds */
    --color-bg-overlay: rgba(0, 0, 0, 0.5);         /* Modal overlays */

    /* Text System */
    --color-text-primary: var(--color-gray-900);    /* Main body text */
    --color-text-secondary: var(--color-gray-700);  /* Supporting text */
    --color-text-tertiary: var(--color-gray-500);   /* Disabled/placeholder text */
    --color-text-inverse: var(--color-white);       /* Text on dark backgrounds */
    --color-text-on-color: var(--color-white);      /* Text on colored backgrounds */

    /* Border System */
    --color-border: var(--color-gray-300);          /* Default borders */
    --color-border-light: var(--color-gray-200);    /* Light borders */
    --color-border-strong: var(--color-gray-400);   /* Emphasized borders */
    --color-border-focus: var(--color-aim-secondary); /* Focus states */

    /* Interactive System */
    --color-interactive-base: var(--color-aim-secondary);
    --color-interactive-hover: var(--color-aim-accent);
    --color-interactive-active: var(--color-aim-primary);
    --color-interactive-disabled: var(--color-gray-400);

    /* State System */
    --color-state-success: var(--color-success-500);
    --color-state-warning: var(--color-warning-500);
    --color-state-error: var(--color-error-500);
    --color-state-info: var(--color-info-500);

    /* ===========================
       COMPONENT-SPECIFIC TOKENS
       Colors for specific UI patterns
       =========================== */

    /* Navigation System */
    --color-nav-bg: var(--color-primary);
    --color-nav-text: var(--color-text-on-color);
    --color-nav-hover: rgba(255, 255, 255, 0.1);
    --color-nav-active: rgba(255, 255, 255, 0.2);

    /* Form System */
    --color-form-bg: var(--color-bg-surface);
    --color-form-border: var(--color-border);
    --color-form-focus: var(--color-border-focus);
    --color-form-error: var(--color-error-500);
    --color-form-success: var(--color-success-500);

    /* Button System */
    --color-btn-primary-bg: var(--color-primary);
    --color-btn-primary-text: var(--color-text-on-color);
    --color-btn-primary-hover: var(--color-primary-hover);

    --color-btn-secondary-bg: var(--color-gray-200);
    --color-btn-secondary-text: var(--color-text-primary);
    --color-btn-secondary-hover: var(--color-gray-300);

    --color-btn-danger-bg: var(--color-error-500);
    --color-btn-danger-text: var(--color-text-on-color);
    --color-btn-danger-hover: var(--color-error-600);

    /* ===========================
       LEGACY COMPATIBILITY
       Map existing variables to tokens
       =========================== */

    /* Legacy navbar variables */
    --mainnav-bg-color: var(--color-nav-bg);
    --mainnav-text-color: var(--color-nav-text);
    --mainnav-link-hover-color: var(--color-nav-hover);
    --mainnav-link-active-color: var(--color-nav-active);

    /* Legacy Bootstrap-style variables */
    --bs-primary: var(--color-primary);
    --bs-secondary: var(--color-gray-500);
    --bs-success: var(--color-success-500);
    --bs-danger: var(--color-error-500);
    --bs-warning: var(--color-warning-500);
    --bs-info: var(--color-info-500);
    --bs-light: var(--color-gray-100);
    --bs-dark: var(--color-gray-800);

    /* Legacy border colors */
    --bs-border-color: var(--color-border);
    --bs-border-color-subtle: var(--color-border-light);

    /* ===========================
       ALPHA VARIANTS
       Colors with transparency
       =========================== */

    --color-primary-alpha-10: rgba(15, 36, 68, 0.1);
    --color-primary-alpha-20: rgba(15, 36, 68, 0.2);
    --color-primary-alpha-50: rgba(15, 36, 68, 0.5);

    --color-success-alpha-10: rgba(16, 185, 129, 0.1);
    --color-warning-alpha-10: rgba(245, 158, 11, 0.1);
    --color-error-alpha-10: rgba(239, 68, 68, 0.1);
}

/*
 * ===========================
 * THEME VARIANTS
 * Additional color schemes for different contexts
 * =========================== */

[data-theme="dark"] {
    /* Dark mode color overrides */
    --color-bg-page: var(--color-gray-900);
    --color-bg-surface: var(--color-gray-800);
    --color-bg-muted: var(--color-gray-700);

    --color-text-primary: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-300);
    --color-text-tertiary: var(--color-gray-500);

    --color-border: var(--color-gray-700);
    --color-border-light: var(--color-gray-600);
    --color-border-strong: var(--color-gray-500);
}

[data-theme="high-contrast"] {
    /* High contrast overrides for accessibility */
    --color-text-primary: var(--color-black);
    --color-bg-surface: var(--color-white);
    --color-border: var(--color-black);
    --color-primary: #0000ff;
    --color-primary-hover: #000080;
}

/*
 * ===========================
 * UTILITY CLASSES
 * Quick access to color tokens
 * =========================== */

.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-success { color: var(--color-state-success) !important; }
.text-warning { color: var(--color-state-warning) !important; }
.text-error { color: var(--color-state-error) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-surface { background-color: var(--color-bg-surface) !important; }
.bg-muted { background-color: var(--color-bg-muted) !important; }

.border-primary { border-color: var(--color-primary) !important; }
.border-default { border-color: var(--color-border) !important; }