/*
 * Cando.FORMS - Standard Theme Variables
 * Compatible with Bootstrap and common CSS frameworks
 * 
 * This file provides a standard mapping layer between:
 * - Bootstrap CSS variables
 * - Material Design tokens  
 * - Common theme frameworks
 * - Cando custom components
 */

:root {
  /* Bootstrap 5 Compatible Variables */
  --bs-primary: var(--theme-primary, #0d6efd);
  --bs-secondary: var(--theme-secondary, #6c757d);
  --bs-success: var(--theme-success, #198754);
  --bs-info: var(--theme-info, #0dcaf0);
  --bs-warning: var(--theme-warning, #ffc107);
  --bs-danger: var(--theme-danger, #dc3545);
  --bs-light: var(--theme-light, #f8f9fa);
  --bs-dark: var(--theme-dark, #212529);

  /* Bootstrap Body & Background */
  --bs-body-bg: var(--theme-bg-body, #ffffff);
  --bs-body-color: var(--theme-text-primary, #212529);
  --bs-body-font-family: var(--theme-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --bs-body-font-size: var(--theme-font-size, 1rem);
  --bs-body-font-weight: var(--theme-font-weight, 400);
  --bs-body-line-height: var(--theme-line-height, 1.5);

  /* Bootstrap Border & Border Radius */
  --bs-border-color: var(--theme-border-color, #dee2e6);
  --bs-border-radius: var(--theme-border-radius, 0.375rem);
  --bs-border-radius-sm: var(--theme-border-radius-sm, 0.25rem);
  --bs-border-radius-lg: var(--theme-border-radius-lg, 0.5rem);

  /* Bootstrap Link Colors */
  --bs-link-color: var(--theme-primary, #0d6efd);
  --bs-link-hover-color: var(--theme-primary-dark, #0a58ca);

  /* Material Design Compatible */
  --md-sys-color-primary: var(--theme-primary);
  --md-sys-color-on-primary: var(--theme-text-light);
  --md-sys-color-surface: var(--theme-bg-content);
  --md-sys-color-on-surface: var(--theme-text-primary);
  --md-sys-color-background: var(--theme-bg-body);
  --md-sys-color-on-background: var(--theme-text-primary);

  /* Common Framework Variables */
  --color-primary: var(--theme-primary);
  --color-secondary: var(--theme-secondary);
  --color-background: var(--theme-bg-body);
  --color-surface: var(--theme-bg-content);
  --color-text: var(--theme-text-primary);
  --color-text-secondary: var(--theme-text-secondary);

  /* Sidebar Variables (Serenity Specific) */
  --sidebar-bg: var(--theme-bg-sidebar);
  --sidebar-text: var(--theme-text-sidebar, var(--theme-text-light));
  --header-bg: var(--theme-bg-header);
  --header-text: var(--theme-text-header, var(--theme-text-light));

  /* Shadow Variables */
  --shadow-sm: var(--theme-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
  --shadow: var(--theme-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
  --shadow-lg: var(--theme-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));

  /* Animation Variables */
  --transition-base: var(--theme-transition, 0.15s ease-in-out);
  --transition-fade: var(--theme-transition-fade, 0.15s linear);
  --transition-collapse: var(--theme-transition-collapse, 0.35s ease);
}

/* Apply Bootstrap body styles */
body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Standard component mappings for third-party themes */
.btn-primary {
  --bs-btn-color: var(--theme-text-light);
  --bs-btn-bg: var(--theme-primary);
  --bs-btn-border-color: var(--theme-primary);
  --bs-btn-hover-color: var(--theme-text-light);
  --bs-btn-hover-bg: var(--theme-primary-dark);
  --bs-btn-hover-border-color: var(--theme-primary-dark);
}

.btn-secondary {
  --bs-btn-color: var(--theme-text-light);
  --bs-btn-bg: var(--theme-secondary);
  --bs-btn-border-color: var(--theme-secondary);
  --bs-btn-hover-color: var(--theme-text-light);
  --bs-btn-hover-bg: var(--theme-secondary-dark);
  --bs-btn-hover-border-color: var(--theme-secondary-dark);
}

.card {
  --bs-card-bg: var(--theme-bg-content);
  --bs-card-border-color: var(--theme-border-color);
}

.navbar {
  --bs-navbar-color: var(--header-text);
  --bs-navbar-bg: var(--header-bg);
  --bs-navbar-border-color: var(--theme-border-color);
}

/* Alert mappings */
.alert-primary { --bs-alert-color: var(--theme-primary); --bs-alert-bg: rgba(from var(--theme-primary) r g b / 0.1); }
.alert-success { --bs-alert-color: var(--theme-success); --bs-alert-bg: rgba(from var(--theme-success) r g b / 0.1); }
.alert-danger { --bs-alert-color: var(--theme-danger); --bs-alert-bg: rgba(from var(--theme-danger) r g b / 0.1); }
.alert-warning { --bs-alert-color: var(--theme-warning); --bs-alert-bg: rgba(from var(--theme-warning) r g b / 0.1); }
.alert-info { --bs-alert-color: var(--theme-info); --bs-alert-bg: rgba(from var(--theme-info) r g b / 0.1); }

/* Form controls */
.form-control {
  --bs-form-control-bg: var(--theme-bg-content);
  --bs-form-control-color: var(--theme-text-primary);
  --bs-form-control-border-color: var(--theme-border-color);
  --bs-form-control-focus-border-color: var(--theme-primary);
}

/* Dropdown */
.dropdown-menu {
  --bs-dropdown-bg: var(--theme-bg-content);
  --bs-dropdown-border-color: var(--theme-border-color);
  --bs-dropdown-color: var(--theme-text-primary);
  --bs-dropdown-link-color: var(--theme-text-primary);
  --bs-dropdown-link-hover-color: var(--theme-text-light);
  --bs-dropdown-link-hover-bg: var(--theme-primary);
}