/* =================================================================
   OPTIROUTE DASHBOARD - SISTEMA DE TEMAS
   ================================================================= */

/* Light Theme Variables */
:root {
    /* CORE COLORS */
    --background: #ffffff;
    --background-secondary: #F8F9FA;
    --background-tertiary: #ffffff;
    --text: #202124;
    --sub-text: #5F6368;
    --primary: #1A73E8;
    --secondary: #5F6368;
    --tertiary: #E8F0FE;

    /* ICONS */
    --icon-wrapper: rgba(0, 0, 0, 0.04);
    --icon-primary: #2769f3;
    --icon-secondary-color: #575972;
    --icon-secondary-border: #e0e0e0;

    /* TYPOGRAPHY */
    --typography-heading: #202124;
    --typography-body: #3C4043;
    --typography-caption: #5F6368;
    --typography-link: #1A73E8;
    --typography-link-hover: #0B5CDB;
    --typography-code: #3C4043;
    --typography-quote: #5F6368;

    /* INTERACTIVE STATES */
    --state-hover: rgba(26, 115, 232, 0.08);
    --state-active: rgba(26, 115, 232, 0.15);
    --state-selected: rgba(26, 115, 232, 0.05);
    --state-disabled: rgba(95, 99, 104, 0.2);
    --state-focused: rgba(26, 115, 232, 0.1);

    /* BUTTONS */
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #404447;
    --btn-primary-hover: #0B5CDB;
    --btn-primary-active: #0948B3;
    --btn-primary-disabled: #8AB4F8;
    --btn-primary-border: #c5cfd7;

    --btn-secondary-bg: #F8F9FA;
    --btn-secondary-text: #3C4043;
    --btn-secondary-hover: #F1F3F5;
    --btn-secondary-active: #E8EAED;
    --btn-secondary-disabled: #F8F9FA;
    --btn-secondary-border: #DADCE0;

    --btn-outline-bg: transparent;
    --btn-outline-text: #1A73E8;
    --btn-outline-hover: rgba(26, 115, 232, 0.08);
    --btn-outline-active: rgba(26, 115, 232, 0.15);
    --btn-outline-disabled: #8AB4F8;
    --btn-outline-border: #1A73E8;

    --btn-danger-bg: #D93025;
    --btn-danger-text: #FFFFFF;
    --btn-danger-hover: #C5221F;
    --btn-danger-active: #B31412;
    --btn-danger-disabled: #F5BBB9;

    /* FORMS */
    --form-input-bg: #FFFFFF;
    --form-input-border: #c5cfd7;
    --form-input-border-focused: #1A73E8;
    --form-input-border-error: #D93025;
    --form-input-text: #202124;
    --form-input-placeholder: #5F6368;
    --form-input-label: #5F6368;
    --form-input-icon: #5F6368;
    --form-input-icon-focused: #1A73E8;

    /* NAVIGATION */
    --nav-bg: #FFFFFF;
    --nav-border: #DADCE0;
    --nav-text: #5F6368;
    --nav-text-active: #1A73E8;
    --nav-icon: #5F6368;
    --nav-icon-active: #1A73E8;
    --nav-indicator: #1A73E8;

    /* CONTAINERS */
    --card-bg: #F8F9FA;
    --card-border: #DADCE0;
    --card-shadow: rgba(0, 0, 0, 0.05);
    --card-shadow-hover: rgba(0, 0, 0, 0.08);

    --modal-bg: #F8F9FA;
    --modal-backdrop: rgba(32, 33, 36, 0.6);
    --modal-border: #DADCE0;
    --modal-shadow: rgba(0, 0, 0, 0.15);

    /* FEEDBACK */
    --feedback-success-bg: #188038;
    --feedback-success-text: #FFFFFF;
    --feedback-warning-bg: #F29900;
    --feedback-warning-text: #FFFFFF;
    --feedback-error-bg: #D93025;
    --feedback-error-text: #FFFFFF;
    --feedback-info-bg: #1A73E8;
    --feedback-info-text: #FFFFFF;

    /* LOADING & EFFECTS */
    --loading-spinner: #1A73E8;
    --loading-track: #E8EAED;
    --loading-skeleton: #E8EAED;
    --loading-shimmer: #F8F9FA;

    --shadow-sm: rgba(0, 0, 0, 0.05);
    --shadow-md: rgba(0, 0, 0, 0.08);
    --shadow-lg: rgba(0, 0, 0, 0.12);

    --overlay-light: rgba(255, 255, 255, 0.8);
    --overlay-medium: rgba(255, 255, 255, 0.5);
    --overlay-dark: rgba(32, 33, 36, 0.7);

    /* RIPPLE EFFECT */
    --ripple: rgba(26, 115, 232, 0.12);
}

/* Dark Theme Variables */
[data-theme="dark"] {
    /* CORE COLORS */
    --background: #1e1f20;
    --background-secondary: #131314;
    --background-tertiary: #1e1f20;
    --text: #F5F5F5;
    --sub-text: #767676;
    --primary: #1A73E8;
    --secondary: #3c3c3c;
    --tertiary: #2c2c2c;

    /* ICONS */
    --icon-wrapper: rgba(255, 255, 255, 0.15);
    --icon-primary: #545454;
    --icon-secondary-color: #545454;
    --icon-secondary-border: #767676;

    /* TYPOGRAPHY */
    --typography-heading: #F5F5F5;
    --typography-body: #E0E0E0;
    --typography-caption: #767676;
    --typography-link: #F5F5F5;
    --typography-link-hover: #5c5c5c;
    --typography-code: #E0E0E0;
    --typography-quote: #5c5c5c;

    /* INTERACTIVE STATES */
    --state-hover: rgba(84, 84, 84, 0.3);
    --state-active: rgba(76, 76, 76, 0.25);
    --state-selected: rgba(76, 76, 76, 0.2);
    --state-disabled: rgba(76, 76, 76, 0.15);
    --state-focused: rgba(84, 84, 84, 0.3);

    /* BUTTONS */
    --btn-primary-bg: #2a2b2e;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #4c4c4c;
    --btn-primary-active: #343434;
    --btn-primary-disabled: #242424;
    --btn-primary-border: #545454;

    --btn-secondary-bg: #242424;
    --btn-secondary-text: #EEEEEE;
    --btn-secondary-hover: #2c2c2c;
    --btn-secondary-active: #343434;
    --btn-secondary-disabled: #131314;
    --btn-secondary-border: #343434;

    --btn-outline-bg: transparent;
    --btn-outline-text: #767676;
    --btn-outline-hover: rgba(60, 60, 60, 0.1);
    --btn-outline-active: rgba(60, 60, 60, 0.2);
    --btn-outline-disabled: #2c2c2c;
    --btn-outline-border: #545454;

    --btn-danger-bg: #C62828;
    --btn-danger-text: #FFFFFF;
    --btn-danger-hover: #D32F2F;
    --btn-danger-active: #B71C1C;
    --btn-danger-disabled: #7A1717;

    /* FORMS */
    --form-input-bg: #31343a;
    --form-input-border: #343434;
    --form-input-border-focused: #545454;
    --form-input-border-error: #E57373;
    --form-input-text: #F0F0F0;
    --form-input-placeholder: #5c5c5c;
    --form-input-label: #767676;
    --form-input-icon: #5c5c5c;
    --form-input-icon-focused: #767676;

    /* NAVIGATION */
    --nav-bg: #090909;
    --nav-border: #242424;
    --nav-text: #767676;
    --nav-text-active: #F5F5F5;
    --nav-icon: #767676;
    --nav-icon-active: #F5F5F5;
    --nav-indicator: #545454;

    /* CONTAINERS */
    --card-bg: #131314;
    --card-border: #242424;
    --card-shadow: rgba(0, 0, 0, 0.4);
    --card-shadow-hover: rgba(0, 0, 0, 0.55);

    --modal-bg: #131314;
    --modal-backdrop: rgba(0, 0, 0, 0.75);
    --modal-border: #242424;
    --modal-shadow: rgba(0, 0, 0, 0.5);

    /* FEEDBACK */
    --feedback-success-bg: #388E3C;
    --feedback-success-text: #FFFFFF;
    --feedback-warning-bg: #F57C00;
    --feedback-warning-text: #FFFFFF;
    --feedback-error-bg: #C62828;
    --feedback-error-text: #FFFFFF;
    --feedback-info-bg: #1976D2;
    --feedback-info-text: #FFFFFF;

    /* LOADING & EFFECTS */
    --loading-spinner: #545454;
    --loading-track: #2c2c2c;
    --loading-skeleton: #242424;
    --loading-shimmer: #343434;

    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.5);
    --shadow-lg: rgba(0, 0, 0, 0.7);

    --overlay-light: rgba(0, 0, 0, 0.4);
    --overlay-medium: rgba(0, 0, 0, 0.6);
    --overlay-dark: rgba(0, 0, 0, 0.85);

    /* RIPPLE EFFECT */
    --ripple: rgba(84, 84, 84, 0.25);
}

/* Theme transition animation */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Disable transitions for initial page load */
.no-transition * {
    transition: none !important;
}