/*
 * Locastyle v2 - Camada de vari�veis
 *
 * Objetivo: Mapear o design system do Locastyle (baseado em Bootstrap 3.1.1)
 * para as vari�veis do padr�o Backoffice (/_colors.css, /_base.css, /_bootstrap.css)
 * e permitir que os temas em /_themes/_tray.css, /_themes/_bling.css e /_themes/_bagy.css
 * ajustem tudo apenas sobrescrevendo vari�veis.
 *
 * Observa��es:
 * - N�O aplicar estilos diretos aqui; apenas declarar vari�veis.
 * - Sempre referenciar vari�veis existentes do backoffice quando poss�vel.
 * - Para vari�veis espec�ficas do Locastyle (prefixo --ls-*) usar equivalentes
 *   do backoffice para manter consist�ncia de tema e dark mode.
 */

:root {
    /* ==========================================
       Tipografia & Base
       ========================================== */
    --ls-font-family-base: var(--font-family-base);
    --ls-font-size-base: var(--font-size-base);
    --ls-line-height-base: var(--line-height-base);
    --ls-font-weight-normal: var(--font-weight-normal);
    --ls-font-weight-bold: var(--font-weight-bold);

    /* ==========================================
       Paleta de Cores (alias Locastyle -> Backoffice)
       ========================================== */
    --ls-color-primary: var(--color-primary);
    --ls-color-primary-hover: var(--color-primary-hover);
    --ls-color-primary-dark: var(--color-primary-hover);
    --ls-color-primary-light: color-mix(in srgb, var(--ls-color-primary) 66%, transparent);

    --ls-color-secondary: var(--color-secondary);
    --ls-color-secondary-hover: var(--color-secondary-hover);
    --ls-color-secondary-dark: var(--color-secondary-dark);
    --ls-color-secondary-light: var(--color-secondary-light);

    --ls-color-success: var(--color-success);
    --ls-color-success-hover: var(--color-success-hover);
    --ls-color-success-dark: var(--color-success-dark);
    --ls-color-success-light: var(--color-success-light);

    --ls-color-info: var(--color-info);
    --ls-color-info-hover: var(--color-info-hover);
    --ls-color-info-dark: var(--color-info-dark);
    --ls-color-info-light: var(--color-info-light);

    --ls-color-warning: var(--color-warning);
    --ls-color-warning-hover: var(--color-warning-hover);
    --ls-color-warning-dark: var(--color-warning-dark);
    --ls-color-warning-light: var(--color-warning-light);

    --ls-color-danger: var(--color-danger);
    --ls-color-danger-hover: var(--color-danger-hover);
    --ls-color-danger-dark: var(--color-danger-dark);
    --ls-color-danger-light: var(--color-danger-light);

    --ls-color-white: var(--color-white);
    --ls-color-black: var(--color-black);
    --ls-color-gray-50: var(--color-gray-50);
    --ls-color-gray-100: var(--color-gray-100);
    --ls-color-gray-200: var(--color-gray-200);
    --ls-color-gray-300: var(--color-gray-300);
    --ls-color-gray-400: var(--color-gray-400);
    --ls-color-gray-500: var(--color-gray-500);
    --ls-color-gray-600: var(--color-gray-600);
    --ls-color-gray-700: var(--color-gray-700);
    --ls-color-gray-800: var(--color-gray-800);
    --ls-color-gray-900: var(--color-gray-900);

    /* Texto e fundos */
    --ls-text-color: var(--text-primary);
    --ls-text-secondary: var(--text-secondary);
    --ls-text-muted: var(--text-muted);
    --ls-text-inverse: var(--text-inverse);
    --ls-text-disabled: var(--text-disabled);

    --ls-bg-body: var(--bg-primary);
    --ls-bg-secondary: var(--bg-secondary);
    --ls-bg-tertiary: var(--bg-tertiary);
    --ls-bg-overlay: var(--bg-overlay);

    /* Bordas & Radius & Sombra */
    --ls-border-color: var(--border-color);
    --ls-border-color-light: var(--border-color-light);
    --ls-border-color-dark: var(--border-color-dark);
    --ls-border-width: var(--border-width);
    --ls-border-radius: var(--border-radius);
    --ls-border-radius-sm: var(--border-radius-sm);
    --ls-border-radius-md: var(--border-radius-md);
    --ls-border-radius-lg: var(--border-radius-lg);
    --ls-border-radius-xl: var(--border-radius-xl);
    --ls-border-radius-full: var(--border-radius-full);
    --ls-shadow-sm: var(--shadow-sm);
    --ls-shadow: var(--shadow);
    --ls-shadow-md: var(--shadow-md);
    --ls-shadow-lg: var(--shadow-lg);
    --ls-shadow-xl: var(--shadow-xl);

    /* Espa�amentos (alias) */
    --ls-spacing-0: var(--spacing-0);
    --ls-spacing-1: var(--spacing-1);
    --ls-spacing-2: var(--spacing-2);
    --ls-spacing-3: var(--spacing-3);
    --ls-spacing-4: var(--spacing-4);
    --ls-spacing-5: var(--spacing-5);
    --ls-spacing-6: var(--spacing-6);
    --ls-spacing-7: var(--spacing-7);
    --ls-spacing-8: var(--spacing-8);
    --ls-spacing-10: var(--spacing-10);
    --ls-spacing-12: var(--spacing-12);
    --ls-spacing-16: var(--spacing-16);
    --ls-spacing-20: var(--spacing-20);

    /* Z-index (alias) */
    --ls-z-dropdown: var(--z-dropdown);
    --ls-z-sticky: var(--z-sticky);
    --ls-z-fixed: var(--z-fixed);
    --ls-z-modal-backdrop: var(--z-modal-backdrop);
    --ls-z-modal: var(--z-modal);
    --ls-z-popover: var(--z-popover);
    --ls-z-tooltip: var(--z-tooltip);

    /* ==========================================
       Bot�es (ls-btn*)
       ========================================== */
    --ls-btn-font-weight: var(--btn-font-weight);
    --ls-btn-border-radius: var(--btn-border-radius);
    --ls-btn-padding-x: var(--btn-padding-x, var(--bs-btn-padding-x, 0.75rem));
    --ls-btn-padding-y: var(--btn-padding-y, var(--bs-btn-padding-y, 0.5625rem));

    --ls-btn-primary-bg: var(--btn-primary-bg);
    --ls-btn-primary-border: var(--btn-primary-border);
    --ls-btn-primary-text: var(--btn-primary-text);
    --ls-btn-primary-hover-bg: var(--btn-primary-hover-bg);
    --ls-btn-primary-hover-border: var(--btn-primary-hover-border);

    --ls-btn-secondary-bg: var(--btn-secondary-bg);
    --ls-btn-secondary-border: var(--btn-secondary-border);
    --ls-btn-secondary-text: var(--btn-secondary-text);
    --ls-btn-secondary-hover-bg: var(--btn-secondary-hover-bg);
    --ls-btn-secondary-hover-border: var(--btn-secondary-hover-border);

    --ls-btn-success-bg: var(--color-success);
    --ls-btn-success-border: var(--color-success);
    --ls-btn-success-text: var(--color-white);
    --ls-btn-success-hover-bg: var(--color-success-hover);
    --ls-btn-success-hover-border: var(--color-success-hover);

    --ls-btn-info-bg: var(--color-info);
    --ls-btn-info-border: var(--color-info);
    --ls-btn-info-text: var(--color-white);
    --ls-btn-info-hover-bg: var(--color-info-hover);
    --ls-btn-info-hover-border: var(--color-info-hover);

    --ls-btn-warning-bg: var(--color-warning);
    --ls-btn-warning-border: var(--color-warning);
    --ls-btn-warning-text: var(--color-gray-900);
    --ls-btn-warning-hover-bg: var(--color-warning-hover);
    --ls-btn-warning-hover-border: var(--color-warning-hover);

    --ls-btn-danger-bg: var(--color-danger);
    --ls-btn-danger-border: var(--color-danger);
    --ls-btn-danger-text: var(--color-white);
    --ls-btn-danger-hover-bg: var(--color-danger-hover);
    --ls-btn-danger-hover-border: var(--color-danger-hover);

    /* ==========================================
       Alertas (ls-alert-*)
       ========================================== */
    --ls-alert-border-radius: var(--alert-border-radius);
    --ls-alert-padding-x: var(--alert-padding-x);
    --ls-alert-padding-y: var(--alert-padding-y);

    --ls-alert-primary-bg: var(--alert-primary-bg);
    --ls-alert-primary-border: var(--alert-primary-border);
    --ls-alert-primary-text: var(--text-base);

    --ls-alert-secondary-bg: var(--alert-secondary-bg);
    --ls-alert-secondary-border: var(--alert-secondary-border);
    --ls-alert-secondary-text: var(--text-base);

    --ls-alert-success-bg: var(--alert-success-bg);
    --ls-alert-success-border: var(--form-feedback-valid-color);
    --ls-alert-success-text: var(--text-base);

    --ls-alert-info-bg: var(--alert-info-bg);
    --ls-alert-info-border: var(--alert-info-border);
    --ls-alert-info-text: var(--text-base);

    --ls-alert-warning-bg: var(--alert-warning-bg);
    --ls-alert-warning-border: var(--alert-warning-border);
    --ls-alert-warning-text: var(--text-base);

    --ls-alert-danger-bg: var(--alert-danger-bg);
    --ls-alert-danger-border: var(--form-feedback-invalid-color);
    --ls-alert-danger-text: var(--text-base);

    /* ==========================================
       Formul�rios
       ========================================== */
    --ls-form-control-bg: var(--form-control-bg);
    --ls-form-control-text: var(--form-control-text);
    --ls-form-control-border-color: var(--form-control-border-color);
    --ls-form-control-border-radius: var(--form-control-border-radius);
    --ls-form-control-placeholder: var(--text-muted);
    --ls-form-control-focus-border: var(--form-control-border-color-focus);
    --ls-form-control-focus-ring: var(--color-focus-ring);
    --ls-form-control-disabled-bg: var(--form-control-bg-disabled);
    --ls-form-control-disabled-text: var(--form-control-text-disabled);
    --form-control-padding-y: 0.325rem;
    --form-control-padding-x: 0.625rem;

    /* ==========================================
       Tabelas
       ========================================== */
    --ls-table-bg: var(--bg-primary);
    --ls-table-border-color: var(--table-border-color);
    --ls-table-striped-bg: var(--table-striped-bg);
    --ls-table-hover-bg: var(--table-hover-bg);

    /* ==========================================
       Breadcrumb
       ========================================== */
    --ls-breadcrumb-text: var(--text-primary);
    --ls-breadcrumb-link: var(--color-primary);
    --ls-breadcrumb-link-hover: var(--color-primary-dark);
    --ls-breadcrumb-separator: var(--border-color);
    --ls-breadcrumb-border: var(--border-color);

    /* ==========================================
       Abas (Tabs)
       ========================================== */
    --ls-tabs-link-color: var(--text-primary);
    --ls-tabs-link-active-color: var(--text-primary);
    --ls-tabs-link-hover-bg: var(--bg-secondary);
    --ls-tabs-link-active-bg: var(--bg-primary);
    --ls-tabs-border-color: var(--border-color);

    /* ==========================================
       Pagina��o
       ========================================== */
    --ls-pagination-color: var(--color-primary);
    --ls-pagination-bg: var(--bg-primary);
    --ls-pagination-border-color: var(--border-color);
    --ls-pagination-hover-color: var(--color-primary-dark);
    --ls-pagination-hover-bg: var(--bg-secondary);
    --ls-pagination-active-color: var(--color-white);
    --ls-pagination-active-bg: var(--color-primary);
    --ls-pagination-active-border-color: var(--color-primary);
    --ls-pagination-disabled-color: var(--text-disabled);
    --ls-pagination-disabled-bg: var(--bg-primary);

    /* ==========================================
       Topbar
       ========================================== */
    --ls-topbar-height: 60px;
    --ls-topbar-bg: var(--color-primary);
    --ls-topbar-text: var(--color-white);
    --ls-topbar-link: var(--color-white);
    --ls-topbar-icon: var(--color-white);

    /* ==========================================
       Sidebar & Menu
       ========================================== */
    --ls-sidebar-bg: var(--color-gray-900);
    --ls-sidebar-text: var(--color-gray-300);
    --ls-sidebar-link: var(--color-gray-300);
    --ls-sidebar-link-hover-bg: var(--color-gray-800);
    --ls-sidebar-border-color: #222222; /* aproxima��o do legado */
    --ls-sidebar-width: 265px;
    --ls-sidebar-width-collapsed: 60px;

    /* ==========================================
       Dropdown
       ========================================== */
    --ls-dropdown-bg: var(--bg-primary);
    --ls-dropdown-border-color: var(--border-color);
    --ls-dropdown-link-color: var(--text-primary);
    --ls-dropdown-link-hover-bg: var(--bg-secondary);
    --ls-dropdown-link-hover-color: var(--text-primary);

    /* ==========================================
       Notifica��es (painel lateral)
       ========================================== */
    --ls-notification-bg: var(--color-gray-900);
    --ls-notification-text: var(--color-white);
    --ls-notification-border-color: var(--color-gray-700);

    /* ==========================================
       Modais
       ========================================== */
    --ls-modal-bg: var(--modal-content-bg);
    --ls-modal-border-color: var(--modal-content-border-color);
    --ls-modal-header-border: var(--modal-header-border-color);
    --ls-modal-footer-border: var(--modal-footer-border-color);
    --ls-modal-backdrop-bg: var(--modal-backdrop-bg);

    /* ==========================================
       Tooltip & Popover
       ========================================== */
    --ls-tooltip-bg: var(--color-gray-900);
    --ls-tooltip-text: var(--color-white);
    --ls-popover-bg: var(--bg-primary);
    --ls-popover-text: var(--text-primary);
    --ls-popover-border-color: var(--border-color);

    /* ==========================================
       Steps (wizard)
       ========================================== */
    --ls-steps-line-color: var(--border-color);
    --ls-steps-dot-color: var(--text-muted);
    --ls-steps-active-color: var(--color-primary);
    --ls-steps-title-color: var(--text-secondary);

    /* ==========================================
       Login
       ========================================== */
    --ls-login-bg: var(--bg-secondary);
    --ls-login-box-bg: var(--bg-primary);
    --ls-login-text: var(--text-primary);
    --ls-login-button-bg: var(--color-primary);
    --ls-login-button-text: var(--color-white);

    /* ==========================================
       Carrinho (ls-cart)
       ========================================== */
    --ls-cart-header-bg: var(--color-primary);
    --ls-cart-header-text: var(--color-white);
    --ls-cart-content-bg: var(--bg-primary);
    --ls-cart-border-color: var(--border-color);

    /* ==========================================
       Calend�rio (Pikaday / similares)
       ========================================== */
    --ls-calendar-bg: var(--calendar-bg);
    --ls-calendar-border-color: var(--calendar-border-color);
    --ls-calendar-nav-bg: var(--calendar-nav-bg);
    --ls-calendar-nav-hover-bg: var(--calendar-nav-hover-bg);
    --ls-calendar-day-hover-bg: var(--calendar-day-hover-bg);
    --ls-calendar-day-selected-bg: var(--calendar-day-selected-bg);
    --ls-calendar-day-selected-color: var(--calendar-day-selected-color);
    --ls-calendar-day-today-bg: var(--calendar-day-today-bg);
    --ls-calendar-day-today-color: var(--calendar-day-today-color);
}