/* ==============================================
   AULA COLOR SYSTEM
   Change colors here to affect entire site
   ============================================== */

:root {
    /* BRAND */
    --color-primary: #075450;
    --color-primary-hover: #054340;
    --color-secondary: #455A64;
    --color-secondary-hover: #374850;

    /* STATUS */
    --color-success: #008F53;
    --color-success-hover: #007A47;
    --color-warning: #FCA54B;
    --color-warning-hover: #E29443;
    --color-danger: #C21B2C;
    --color-danger-hover: #A81726;
    --color-info: #00647D;
    --color-info-hover: #00536A;

    /* TEXT */
    --color-text-primary: #2D373F;
    --color-text-secondary: #545454;
    --color-text-muted: #999;
    --color-text-inverse: #fff;

    /* BACKGROUNDS */
    --color-bg-body: #f9f9f9;
    --color-bg-surface: #fff;
    --color-bg-light: #f2f3f5;
    --color-bg-neutral: #e3e5e8;
    --color-bg-dark: #2D373F;

    /* BORDERS */
    --color-border-light: #D3DBD7;
    --color-border-default: #ddd;
    --color-border-dark: #ccc;
    --color-border-separator: #e9ecef;

    /* BUTTONS */
    --btn-neutral-bg: #D3DBD7;
    --btn-neutral-hover: #BDC5C1;

    /* ALERTS */
    --alert-primary-bg: #E8F5EE;
    --alert-primary-border: rgba(7, 84, 80, 0.2);
    --alert-primary-text: #075450;

    --alert-secondary-bg: #BFD1D8;
    --alert-secondary-border: rgba(69, 90, 100, 0.2);
    --alert-secondary-text: #455A64;

    --alert-success-bg: #E8F5EE;
    --alert-success-border: rgba(0, 143, 83, 0.3);
    --alert-success-text: #008F53;

    --alert-warning-bg: #FFF4E5;
    --alert-warning-border: rgba(252, 165, 75, 0.2);
    --alert-warning-text: #855000;

    --alert-danger-bg: #FCE8E9;
    --alert-danger-border: rgba(194, 27, 44, 0.2);
    --alert-danger-text: #C21B2C;

    --alert-info-bg: #E5F6FA;
    --alert-info-border: rgba(0, 100, 125, 0.2);
    --alert-info-text: #00647D;

    /* SPECIAL */
    --color-hot-indicator: #ff2929;

    /* GRAYSCALE */
    --color-white: #fff;
    --color-black: #000;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #eee;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ccc;
    --color-gray-500: #aaa;
    --color-gray-600: #888;
    --color-gray-700: #6c757d;
    --color-gray-800: #495057;
    --color-gray-900: #343a40;
    --color-gray-dark: #333;

    /* SOCIAL/PLATFORM */
    --color-facebook: #1877F2;
    --color-facebook-hover: #166FE5;

    /* CODE BLOCKS */
    --color-code-bg: #f1f3f4;
    --color-code-text: #d73a49;

    /* ADDITIONAL UI */
    --color-focus-ring: #80bdff;
    --color-highlight-bg: #e4ddc5;
    --color-highlight-surface: #f0ede2;
    --color-link: #007bff;
    --color-link-hover: #0056b3;
    --color-search-highlight: #FFFF88;

    /* HOVER STATES */
    --color-primary-light: #E8F5EE;
    --color-danger-light: #FCE8E9;
}

/* DARK MODE OVERRIDES */
body.dark-mode {
    --color-text-primary: #fff;
    --color-text-secondary: #c2c9cf;
    --color-text-muted: #888;
    --color-text-inverse: #333;

    --color-bg-body: #1f272d;
    --color-bg-surface: #2D373F;
    --color-bg-light: #3c444a;
    --color-bg-neutral: #4c555b;
    --color-bg-dark: #1D2228;

    --color-border-light: #4c555b;
    --color-border-default: #3c444a;
    --color-border-dark: #2D373F;

    /* Grayscale dark mode */
    --color-white: #fff;
    --color-gray-dark: #c2c9cf;
    --color-gray-200: #4c555b;
    --color-gray-400: #3c444a;

    /* Links dark mode */
    --color-link: #6ea8fe;
    --color-link-hover: #9ec5fe;
}