/**
 * SAI Unified Design System
 * Single source of truth for colors, typography, spacing, and borders.
 * Load this BEFORE Bootstrap and all component CSS.
 *
 * Promotes the --sai-* token system from caller-modern.css to global scope
 * and overrides Bootstrap 5 --bs-* variables for full consistency.
 */

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */

:root {

  /* ── Brand Maersk ── */
  --sai-brand-red:         #002255;   /* Maersk Navy */
  --sai-navbar-brand-bg:   #ffffff;   /* Maersk navbar — white */

  /* ── Primary interactive ── */
  --sai-primary:           #2e699c;
  --sai-primary-hover:     #1e4f7a;
  --sai-primary-light:     #DBEAFE;   /* backgrounds, badges */

  /* ── Secondary ── */
  --sai-secondary:         #607D8B;
  --sai-secondary-hover:   #455A64;

  /* ── Turn action colors (semantic — do not repurpose) ── */
  --sai-action-call:       #1D4ED8;   /* LLAMAR / RELLAMAR */
  --sai-action-start:      #98B716;   /* INICIAR / ATENDER */
  --sai-action-complete:   #EF7D30;   /* FINALIZAR */
  --sai-action-cancel:     #D13F34;   /* CANCELAR */
  --sai-action-transfer:   #8339AA;   /* DERIVAR */

  /* ── Semantic status ── */
  --sai-success:           #0F9D58;
  --sai-success-light:     #D1FAE5;
  --sai-warning:           #F59E0B;
  --sai-warning-light:     #FEF3C7;
  --sai-danger:            #D13F34;
  --sai-danger-light:      #FEE2E2;
  --sai-info:              #03A9F4;
  --sai-info-light:        #E0F2FE;

  /* ── Grayscale ── */
  --sai-gray-50:           #F9FAFB;
  --sai-gray-100:          #F3F4F6;
  --sai-gray-200:          #E5E7EB;
  --sai-gray-300:          #D1D5DB;
  --sai-gray-400:          #9CA3AF;
  --sai-gray-500:          #6B7280;
  --sai-gray-600:          #4B5563;
  --sai-gray-700:          #374151;
  --sai-gray-800:          #1F2937;
  --sai-gray-900:          #111827;

  /* ── Text ── */
  --sai-text-primary:      #1F2937;
  --sai-text-secondary:    #6B7280;
  --sai-text-disabled:     #9CA3AF;
  --sai-text-inverse:      #FFFFFF;

  /* ── Backgrounds ── */
  --sai-bg-primary:        #FFFFFF;
  --sai-bg-secondary:      #F3F4F6;
  --sai-bg-tertiary:       #E5E7EB;
  --sai-bg-page:           #F3F4F6;   /* page-level background */

  /* ── Navbar — Azul Cielo palette ── */
  --sai-navbar-brand:      #0EA5E9;   /* sky blue band */
  --sai-navbar-user:       #E0F2FE;   /* very light blue user band */
  --sai-navbar-text:       #FFFFFF;   /* white text on sky blue */
  --sai-navbar-user-text:  #0369A1;   /* dark blue text on light band */

  /* ── Typography ── */
  --sai-font-family:       'Open Sans', -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sai-font-size-xs:      0.75rem;    /* 12px */
  --sai-font-size-sm:      0.8125rem;  /* 13px */
  --sai-font-size-base:    0.875rem;   /* 14px */
  --sai-font-size-md:      1rem;       /* 16px */
  --sai-font-size-lg:      1.125rem;   /* 18px */
  --sai-font-size-xl:      1.5rem;     /* 24px */
  --sai-font-size-xxl:     2rem;       /* 32px */

  /* ── Spacing (8px base grid) ── */
  --sai-spacing-xs:        0.25rem;   /*  4px */
  --sai-spacing-sm:        0.5rem;    /*  8px */
  --sai-spacing-md:        1rem;      /* 16px */
  --sai-spacing-lg:        1.5rem;    /* 24px */
  --sai-spacing-xl:        2rem;      /* 32px */
  --sai-spacing-xxl:       3rem;      /* 48px */

  /* ── Border radius ── */
  --sai-radius-sm:         4px;
  --sai-radius-md:         8px;
  --sai-radius-lg:         12px;
  --sai-radius-xl:         16px;
  --sai-radius-full:       9999px;

  /* ── Shadows (Material-inspired) ── */
  --sai-shadow-sm:         0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  --sai-shadow-md:         0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
  --sai-shadow-lg:         0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23);

  /* ── Transitions ── */
  --sai-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --sai-transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --sai-transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index layers ── */
  --sai-z-dropdown:        1000;
  --sai-z-sticky:          1020;
  --sai-z-fixed:           1030;
  --sai-z-modal:           1050;
  --sai-z-toast:           1070;

  /* ══════════════════════════════════════════════════════════════════════════
     Bootstrap 5 overrides — align --bs-* with --sai-* tokens
     ══════════════════════════════════════════════════════════════════════════ */
  --bs-primary:            #2563EB;
  --bs-primary-rgb:        37, 99, 235;
  --bs-secondary:          #607D8B;
  --bs-secondary-rgb:      96, 125, 139;
  --bs-success:            #0F9D58;
  --bs-success-rgb:        15, 157, 88;
  --bs-danger:             #D13F34;
  --bs-danger-rgb:         209, 63, 52;
  --bs-warning:            #F59E0B;
  --bs-warning-rgb:        245, 158, 11;
  --bs-info:               #03A9F4;
  --bs-info-rgb:           3, 169, 244;
  --bs-body-font-family:   var(--sai-font-family);
  --bs-body-font-size:     var(--sai-font-size-base);
  --bs-body-color:         var(--sai-text-primary);
  --bs-body-bg:            var(--sai-bg-page);
  --bs-border-radius:      var(--sai-radius-md);
  --bs-border-radius-sm:   var(--sai-radius-sm);
  --bs-border-radius-lg:   var(--sai-radius-lg);
  --bs-border-color:       var(--sai-gray-200);
}

/* ============================================================================
   GLOBAL BASE STYLES
   ============================================================================ */

body {
  font-family: var(--sai-font-family);
  font-size: var(--sai-font-size-base);
  color: var(--sai-text-primary);
  background-color: var(--sai-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Unified button base ── */
.btn {
  font-family: var(--sai-font-family);
  font-size: var(--sai-font-size-sm);
  font-weight: 600;
  border-radius: var(--sai-radius-md);
  transition: background-color var(--sai-transition-fast),
              border-color var(--sai-transition-fast),
              box-shadow var(--sai-transition-fast);
}

.btn-primary {
  background-color: var(--sai-primary);
  border-color: var(--sai-primary);
  color: var(--sai-text-inverse);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--sai-primary-hover);
  border-color: var(--sai-primary-hover);
  color: var(--sai-text-inverse);
}

.btn-secondary {
  background-color: var(--sai-secondary);
  border-color: var(--sai-secondary);
  color: var(--sai-text-inverse);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--sai-secondary-hover);
  border-color: var(--sai-secondary-hover);
  color: var(--sai-text-inverse);
}

.btn-outline-primary {
  border-color: var(--sai-primary);
  color: var(--sai-primary);
}
.btn-outline-primary:hover {
  background-color: var(--sai-primary);
  color: var(--sai-text-inverse);
}

/* ── Unified card ── */
.card {
  border-radius: var(--sai-radius-lg);
  border-color: var(--sai-gray-200);
  box-shadow: var(--sai-shadow-sm);
}

.card-header {
  background-color: var(--sai-gray-50);
  border-bottom-color: var(--sai-gray-200);
  font-weight: 600;
  font-size: var(--sai-font-size-sm);
  color: var(--sai-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Unified form controls ── */
.form-control,
.form-select {
  font-family: var(--sai-font-family);
  font-size: var(--sai-font-size-base);
  border-color: var(--sai-gray-300);
  border-radius: var(--sai-radius-md);
  color: var(--sai-text-primary);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--sai-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ── Unified table ── */
.table {
  font-size: var(--sai-font-size-base);
  color: var(--sai-text-primary);
}
.table thead th {
  font-size: var(--sai-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sai-text-secondary);
  border-bottom-color: var(--sai-gray-200);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--sai-gray-50);
}

/* ── Links ── */
a {
  color: var(--sai-primary);
}
a:hover {
  color: var(--sai-primary-hover);
}

/* ── Badges ── */
.badge.bg-primary   { background-color: var(--sai-primary) !important; }
.badge.bg-secondary { background-color: var(--sai-secondary) !important; }
.badge.bg-success   { background-color: var(--sai-success) !important; }
.badge.bg-danger    { background-color: var(--sai-danger) !important; }
.badge.bg-warning   { background-color: var(--sai-warning) !important; color: #1F2937 !important; }