:root {
  /* Backgrounds */
  --ds-bg-default:          #FFFFFF;   /* Fundo principal da página */
  --ds-bg-subtle:           #F7F8F9;   /* Sidebars, painéis secundários */
  --ds-bg-sunken:           #F1F2F4;   /* Inputs, áreas rebaixadas */
  --ds-bg-raised:           #FFFFFF;   /* Cards, dropdowns */
  --ds-bg-overlay:          #FFFFFF;   /* Modals, popovers */

  /* Brand */
  --ds-bg-brand-boldest:    #0C66E4;   /* Botão primário */
  --ds-bg-brand-bold:       #388BFF;   /* Variante média */
  --ds-bg-brand-subtle:     #E9F2FF;   /* Destaque sutil */

  /* Neutro */
  --ds-bg-neutral:          #091E420F; /* Hover sutil */
  --ds-bg-neutral-hovered:  #091E4224;
  --ds-bg-neutral-pressed:  #091E424F;

  /* Semânticos */
  --ds-bg-success:          #DCFFF1;
  --ds-bg-warning:          #FFF7D6;
  --ds-bg-danger:            #FFECEB;
  --ds-bg-info:             #E9F2FF;
  --ds-bg-discovery:        #F3F0FF;

  /* Texto */
  --ds-text:           #172B4D;  /* Texto principal */
  --ds-text-subtle:    #44546F;  /* Texto secundário */
  --ds-text-subtlest:  #626F86;  /* Placeholder, hint */
  --ds-text-disabled:  #8590A2;
  --ds-text-inverse:   #FFFFFF;  /* Sobre fundos escuros */
  --ds-text-brand:     #0C66E4;
  --ds-text-selected:  #0C66E4;
  --ds-text-success:   #216E4E;
  --ds-text-warning:   #974F0C;
  --ds-text-danger:    #AE2E24;
  --ds-text-info:      #0055CC;
  --ds-text-discovery: #5E4DB2;

  /* Bordas */
  --ds-border:          #091E4224;  /* Borda padrão */
  --ds-border-bold:     #758195;    /* Borda de destaque */
  --ds-border-focused:  #388BFF;    /* Estado de foco */
  --ds-border-input:    #091E4224;
  --ds-border-selected: #0C66E4;
  --ds-border-brand:    #0C66E4;
  --ds-border-success:  #22A06B;
  --ds-border-warning:  #D97008;
  --ds-border-danger:   #E34935;
  --ds-border-info:     #388BFF;

  /* Elevação / Sombras */
  --ds-shadow-raised:   0px 1px 1px #091E3240, 0px 0px 1px #091E324F;
  --ds-shadow-overlay:  0px 8px 12px #091E4226, 0px 0px 1px #091E424F;
  --ds-shadow-overflow: 0px 0px 12px #091E4229;

  /* Espaçamento */
  --ds-space-25:   2px;
  --ds-space-50:   4px;
  --ds-space-75:   6px;
  --ds-space-100:  8px;
  --ds-space-150:  12px;
  --ds-space-200:  16px;
  --ds-space-250:  20px;
  --ds-space-300:  24px;
  --ds-space-400:  32px;
  --ds-space-500:  40px;
  --ds-space-600:  48px;
  --ds-space-800:  64px;
  --ds-space-1000: 80px;

  /* Raio de Borda */
  --ds-radius-sm:   3px;
  --ds-radius-md:   4px;
  --ds-radius-lg:   8px;
  --ds-radius-xl:   12px;
  --ds-radius-full: 9999px;

  /* Tipografia */
  --ds-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-mono:   'JetBrains Mono', 'Fira Code', monospace;
}

[data-theme="dark"] {
  --ds-bg-default:    #1D2125;
  --ds-bg-subtle:     #22272B;
  --ds-bg-sunken:     #161A1D; /* Estimado para dark */
  --ds-bg-raised:     #22272B; /* Cards em dark */
  --ds-bg-overlay:    #282E33; /* Modals em dark */
  
  --ds-text:          #B6C2CF;
  --ds-text-subtle:   #8C9BAB;
  --ds-text-subtlest: #596773;
  --ds-text-disabled: #454F59;
  --ds-text-inverse:  #1D2125;
  
  --ds-border:        #A6C5E229;
  --ds-border-bold:   #738496;
  --ds-border-input:  #A6C5E229;
  
  --ds-bg-neutral:          #A6C5E20F;
  --ds-bg-neutral-hovered:  #A6C5E224;
  --ds-bg-neutral-pressed:  #A6C5E24F;
}

/* Tipografia Utilitários */
.ds-font-display { font-family: var(--ds-font-family); font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; }
.ds-font-h1      { font-family: var(--ds-font-family); font-size: 29px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.ds-font-h2      { font-family: var(--ds-font-family); font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.ds-font-h3      { font-family: var(--ds-font-family); font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.ds-font-h4      { font-family: var(--ds-font-family); font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; }
.ds-font-h5      { font-family: var(--ds-font-family); font-size: 14px; font-weight: 600; line-height: 16px; }
.ds-font-h6      { font-family: var(--ds-font-family); font-size: 12px; font-weight: 600; line-height: 16px; text-transform: uppercase; }
.ds-font-body-lg { font-family: var(--ds-font-family); font-size: 16px; font-weight: 400; line-height: 24px; }
.ds-font-body-md { font-family: var(--ds-font-family); font-size: 14px; font-weight: 400; line-height: 20px; }
.ds-font-body-sm { font-family: var(--ds-font-family); font-size: 12px; font-weight: 400; line-height: 16px; }
.ds-font-code    { font-family: var(--ds-font-mono); font-size: 12px; line-height: 20px; }

/* Reset básico e Base */
body {
  background-color: var(--ds-bg-default);
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Componentes */

/* Buttons */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px; /* Medium default */
  padding: 0 12px;
  border-radius: var(--ds-radius-md);
  font-weight: 500;
  font-family: var(--ds-font-family);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  font-size: 14px;
  gap: 8px; /* Espaçamento moderno entre conteúdo */
}

.ds-btn i {
  font-size: 1.1em;
  margin-right: 0; /* Usando gap no container pai */
}

.ds-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.ds-btn-sm { height: 24px; padding: 0 8px; font-size: 12px; }
.ds-btn-lg { height: 40px; padding: 0 16px; font-size: 16px; }
.ds-btn-xl { height: 48px; padding: 0 24px; font-size: 18px; }

.ds-btn-primary {
  background-color: var(--ds-bg-brand-boldest);
  color: var(--ds-text-inverse);
}
.ds-btn-primary:hover:not(:disabled) { background-color: var(--ds-bg-brand-bold); }
.ds-btn-primary:active:not(:disabled) { background-color: #0055CC; } /* Blue 600 approx */

.ds-btn-default {
  background-color: var(--ds-bg-neutral);
  color: var(--ds-text);
}
.ds-btn-default:hover:not(:disabled) { background-color: var(--ds-bg-neutral-hovered); }
.ds-btn-default:active:not(:disabled) { background-color: var(--ds-bg-neutral-pressed); }

.ds-btn-subtle {
  background-color: transparent;
  color: var(--ds-text);
}
.ds-btn-subtle:hover:not(:disabled) { background-color: var(--ds-bg-neutral); }

.ds-btn-danger {
  background-color: var(--ds-bg-danger);
  color: var(--ds-text-danger);
}
.ds-btn-danger:hover:not(:disabled) { background-color: #FFD2D2; } /* Darker danger bg */

.ds-btn-warning {
  background-color: var(--ds-bg-warning);
  color: var(--ds-text-warning);
}

.ds-btn-link {
  background: none;
  padding: 0;
  color: var(--ds-text-brand);
  height: auto;
}
.ds-btn-link:hover { text-decoration: underline; }

/* Forms */
.ds-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--ds-space-200);
}

.ds-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text-subtle);
  letter-spacing: -0.01em;
}

.ds-input, .ds-select, .ds-textarea {
  background-color: var(--ds-bg-sunken);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  padding: 10px 14px;
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  font-size: 14px;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.ds-input:hover, .ds-select:hover, .ds-textarea:hover {
  background-color: var(--ds-bg-subtle);
  border-color: var(--ds-border-input);
}

.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  background-color: var(--ds-bg-default);
  border-color: var(--ds-brand-boldest);
  box-shadow: 0 0 0 2px var(--ds-bg-brand-subtle);
  outline: none;
}

.ds-input-success { border-color: var(--ds-border-success); }
.ds-input-error   { border-color: var(--ds-border-danger); }

.ds-help-text {
  font-size: 12px;
  color: var(--ds-text-subtlest);
}

/* Checkbox & Radio */
.ds-check-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ds-text);
}

/* Badges */
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ds-radius-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.ds-badge-default { background-color: var(--ds-bg-neutral); color: var(--ds-text); }
.ds-badge-primary { background-color: var(--ds-bg-brand-subtle); color: var(--ds-text-brand); }
.ds-badge-success { background-color: var(--ds-bg-success); color: var(--ds-text-success); }
.ds-badge-warning { background-color: var(--ds-bg-warning); color: var(--ds-text-warning); }
.ds-badge-danger  { background-color: var(--ds-bg-danger); color: var(--ds-text-danger); }
.ds-badge-discovery { background-color: var(--ds-bg-discovery); color: var(--ds-text-discovery); }

/* Lozenges */
.ds-lozenge {
  display: inline-flex;
  padding: 2px 4px;
  border-radius: var(--ds-radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.ds-lozenge-default { background-color: var(--ds-bg-neutral); color: var(--ds-text); }
.ds-lozenge-inprogress { background-color: var(--ds-bg-brand-subtle); color: var(--ds-text-brand); }
.ds-lozenge-success { background-color: var(--ds-bg-success); color: var(--ds-text-success); }
.ds-lozenge-moved { background-color: var(--ds-bg-warning); color: var(--ds-text-warning); }
.ds-lozenge-removed { background-color: var(--ds-bg-danger); color: var(--ds-text-danger); }
.ds-lozenge-new { background-color: var(--ds-bg-discovery); color: var(--ds-text-discovery); }

/* Tags */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--ds-bg-neutral);
  color: var(--ds-text);
  padding: 2px 6px;
  border-radius: var(--ds-radius-sm);
  font-size: 14px;
}

/* Cards */
.ds-card {
  background-color: var(--ds-bg-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-300);
  box-shadow: var(--ds-shadow-raised);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ds-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-overlay);
}

/* Navbar Moderna */
.ds-navbar {
  border-bottom: 1px solid rgba(0,0,0,0.05); /* Borda mais sutil */
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--ds-space-150) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

[data-theme="dark"] .ds-navbar {
  background-color: rgba(29, 33, 37, 0.85);
  border-bottom-color: rgba(255,255,255,0.05);
}
.ds-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.ds-table th {
  border-bottom: 2px solid var(--ds-border);
  padding: var(--ds-space-100);
  color: var(--ds-text-subtle);
  font-size: 12px;
  font-weight: 600;
}
.ds-table td {
  border-bottom: 1px solid var(--ds-border);
  padding: var(--ds-space-100);
  color: var(--ds-text);
}
.ds-table tr:hover td {
  background-color: var(--ds-bg-subtle);
}

/* Alerts */
.ds-alert {
  display: flex;
  gap: var(--ds-space-150);
  padding: var(--ds-space-200);
  border-radius: var(--ds-radius-md);
  margin-bottom: var(--ds-space-200);
}
.ds-alert-title { font-weight: 600; margin-bottom: 4px; }
.ds-alert-info    { background-color: var(--ds-bg-info); color: var(--ds-text-info); }
.ds-alert-success { background-color: var(--ds-bg-success); color: var(--ds-text-success); }
.ds-alert-warning { background-color: var(--ds-bg-warning); color: var(--ds-text-warning); }
.ds-alert-danger  { background-color: var(--ds-bg-danger); color: var(--ds-text-danger); }
.ds-alert-discovery { background-color: var(--ds-bg-discovery); color: var(--ds-text-discovery); }

/* Avatars */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--ds-bg-neutral);
  color: var(--ds-text);
  font-weight: 600;
  overflow: hidden;
}
.ds-avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.ds-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.ds-avatar-md { width: 40px; height: 40px; font-size: 14px; }
.ds-avatar-lg { width: 48px; height: 48px; font-size: 18px; }
.ds-avatar-xl { width: 64px; height: 64px; font-size: 24px; }

/* Layout Utilitários */
.ds-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ds-space-300);
}

/* Layout Estrutural - (Navbar removida pois foi redefinida acima com backdrop-filter) */

.ds-footer {
  border-top: 1px solid var(--ds-border);
  padding: var(--ds-space-400) 0;
  margin-top: auto;
  color: var(--ds-text-subtle);
  font-size: 13px;
  background-color: var(--ds-bg-subtle);
  text-align: center;
}

.ds-main {
  flex: 1;
  padding: var(--ds-space-400) 0;
}

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: var(--ds-space-100); }

/* Bottom Nav Mobile */
.ds-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  background: var(--ds-bg-raised);
  border-top: 1px solid var(--ds-border);
  padding: 8px;
  z-index: 1050;
  justify-content: space-around;
}

.ds-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ds-text-subtle);
  font-size: 12px;
  background: none;
  border: none;
  padding: 8px;
  text-decoration: none;
}

.ds-bottom-nav-item:hover {
  background-color: var(--ds-bg-neutral);
  border-radius: var(--ds-radius-md);
}

.ds-bottom-nav-item-active {
  color: var(--ds-text-brand);
  font-weight: 600;
}

@media (max-width: 768px) {
  .ds-bottom-nav { display: flex; }
  .ds-main { padding-bottom: 80px; }
}

/* Modais Customizados */
.ds-modal-content {
  background-color: var(--ds-bg-overlay);
  border: none;
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-overlay);
}

.ds-modal-header {
  border-bottom: 1px solid var(--ds-border);
  padding: var(--ds-space-300);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ds-modal-body {
  padding: var(--ds-space-300);
}

.ds-modal-footer {
  border-top: 1px solid var(--ds-border);
  padding: var(--ds-space-200) var(--ds-space-300);
  background-color: var(--ds-bg-subtle);
  border-bottom-left-radius: var(--ds-radius-lg);
  border-bottom-right-radius: var(--ds-radius-lg);
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-100);
}

/* Lazy Loading Animation */
.ds-lazy {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ds-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Acessibilidade */
.ds-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--ds-space-200);
  z-index: 1200;
  background: var(--ds-bg-brand-boldest);
  color: var(--ds-text-inverse);
  border-radius: var(--ds-radius-sm);
  padding: 10px 14px;
  text-decoration: none;
}
.ds-skip-link:focus {
  left: var(--ds-space-200);
  box-shadow: var(--ds-shadow-overlay);
}