/* ============================================================
   lightYOU Finance — base.css (Sprint DS-B)
   Reset mínimo + estilos base + classes utilitárias doc-shared,
   consumindo SOMENTE var(--*) de tokens.css (AC-016).
   Nenhum valor visual hardcoded. Telas estendem a partir daqui.
   ============================================================ */

/* --- Reset / base --- */
*,*::before,*::after { box-sizing:border-box; }
html { font-size:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--font-family-base);
  font-size:var(--font-size-base);
  line-height:var(--line-height-body);
  color:var(--color-text-body);
  background-color:var(--color-bg-body);
  -webkit-font-smoothing:antialiased;
  transition:var(--transition-base);
}
a { color:var(--color-link); text-decoration:none; transition:var(--transition-base); }
a:hover { color:var(--color-link); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  color:var(--color-text-heading); font-weight:var(--font-weight-heading);
  line-height:var(--line-height-heading); margin:0 0 var(--heading-margin) 0;
}
h1{font-size:var(--font-size-h1)} h2{font-size:var(--font-size-h2)}
h3{font-size:var(--font-size-h3)} h4{font-size:var(--font-size-h4)}
h5{font-size:var(--font-size-h5)} h6{font-size:var(--font-size-h6)}
p { margin:0 0 var(--space-4) 0; }
hr { border:0; border-top:var(--border-width) solid var(--color-divider); margin:var(--space-4) 0; }
code, .code {
  font-family:var(--font-family-monospace);
  background:var(--color-soft-primary);
  padding:var(--padding-code-y) var(--padding-code-x); border-radius:var(--radius-sm);
}
img { max-width:100%; }

/* --- Text helpers (apenas tokens; sem cor hardcoded) --- */
.text-muted { color:var(--color-text-muted)!important; }
.text-dark { color:var(--color-text-heading)!important; }
.text-white { color:var(--color-bg-surface)!important; }
.text-primary,.text-link { color:var(--color-link)!important; }
.text-success{color:var(--color-success)!important}.text-info{color:var(--color-info)!important}
.text-warning{color:var(--color-warning)!important}.text-danger{color:var(--color-danger)!important}
.text-center{text-align:center}.text-end{text-align:end}
.text-uppercase{text-transform:uppercase}
.fw-normal{font-weight:400}.fw-medium{font-weight:500}.fw-semibold{font-weight:600}
.fw-bold{font-weight:700}.fw-bolder{font-weight:800}
.fs-9{font-size:var(--font-size-9)} .fs-10{font-size:var(--font-size-10)}
.fs-11{font-size:var(--font-size-11)} .fs-12{font-size:var(--font-size-12)}
.fs-13{font-size:var(--font-size-13)} .fs-16{font-size:var(--font-size-16)}

/* --- Layout helpers --- */
.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-block{display:block}.d-inline-block{display:inline-block}
.align-items-center{align-items:center}.align-items-end{align-items:flex-end}
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}
.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-fill{flex:1 1 auto}
.hstack{display:flex;align-items:center;gap:var(--space-3)}
.vstack{display:flex;flex-direction:column;gap:var(--space-half)}
.gap-1{gap:var(--space-quarter)}.gap-2{gap:var(--space-half)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}
.w-100{width:100%}
.me-1{margin-right:var(--space-quarter)}.me-2{margin-right:var(--space-half)}.me-3{margin-right:var(--space-3)}
.ms-auto{margin-left:auto}.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--space-half)}
.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}
.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}
.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}

/* Brand bg utilities (telas resolvem via tokens) */
.bg-primary{background:var(--color-primary)!important;color:var(--color-bg-surface)!important}
.bg-success{background:var(--color-success)!important;color:var(--color-text-heading)!important}
.bg-warning{background:var(--color-warning)!important;color:var(--color-text-heading)!important}
.bg-danger{background:var(--color-danger)!important;color:var(--color-bg-surface)!important}
.bg-soft-primary{background:var(--color-soft-primary)!important;color:var(--color-primary)!important}
.bg-gray-200{background:var(--color-gray-200)!important}
.rounded{border-radius:var(--radius-lg)}
.rounded-3{border-radius:var(--radius-card)}
.rounded-circle{border-radius:var(--radius-circle)}

/* ============================================================
   Componentes base reutilizáveis (subconjunto do catálogo DS-A).
   Telas herdam; novas variantes só via token novo no tokens.css.
   ============================================================ */

/* Button */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-half);
  padding:var(--padding-btn-y) var(--padding-btn-x); font-size:var(--font-size-10);
  font-weight:var(--font-weight-btn); line-height:normal; text-transform:var(--text-transform-btn);
  letter-spacing:var(--letter-spacing-1); border-radius:var(--radius-btn); border:var(--border-width) solid transparent;
  cursor:pointer; color:var(--color-bg-surface); background:var(--color-primary);
  transition:var(--transition-base); text-decoration:none; }
.btn:hover { color:var(--color-bg-surface); box-shadow:var(--focus-ring); filter:brightness(.95); }
.btn:focus { box-shadow:var(--focus-ring); outline:none; }
.btn-primary{background:var(--color-primary)} .btn-secondary{background:var(--color-secondary)}
.btn-success{background:var(--color-success);color:var(--color-text-heading)}
.btn-info{background:var(--color-info);color:var(--color-text-heading)}
.btn-warning{background:var(--color-warning);color:var(--color-text-heading)}
.btn-danger{background:var(--color-danger)} .btn-dark{background:var(--color-dark)}
.btn-light{background:var(--color-light);color:var(--color-text-heading);border-color:var(--color-border-strong)}
.btn-link{background:transparent;color:var(--color-link)}
.btn-link:hover{background:transparent;color:var(--color-link)}
.btn-outline-primary{background:transparent;color:var(--color-primary);border:var(--border-width) solid var(--color-primary)}
.btn-outline-primary:hover{background:var(--color-primary);color:var(--color-bg-surface)}
.btn-sm{padding:var(--padding-btn-sm-y) var(--padding-btn-sm-x);font-size:var(--font-size-btn-sm)}
.btn-md{padding:var(--padding-btn-md-y) var(--padding-btn-md-x);font-size:var(--font-size-btn-md)}
.btn-lg{padding:var(--padding-btn-lg-y) var(--padding-btn-lg-x);font-size:var(--font-size-btn-lg)}
.btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}

/* Badge */
.badge { display:inline-flex; align-items:center; font-size:var(--font-size-11);
  font-weight:var(--font-weight-badge); padding:var(--padding-badge-y) var(--padding-badge-x); border-radius:var(--radius-badge);
  color:var(--color-bg-surface); line-height:1; white-space:nowrap; }
.badge.bg-primary{background:var(--color-primary)}
.badge.bg-success{background:var(--color-success);color:var(--color-text-heading)}
.badge.bg-warning{background:var(--color-warning);color:var(--color-text-heading)}
.badge.bg-danger{background:var(--color-danger)}
.badge.bg-soft-primary{background:var(--color-soft-primary);color:var(--color-primary)}
.badge.bg-soft-success{background:var(--color-soft-success);color:var(--color-success)}
.badge.bg-soft-danger{background:var(--color-soft-danger);color:var(--color-danger)}
.badge.bg-soft-warning{background:var(--color-soft-warning);color:var(--color-warning)}

/* Form control */
.form-label { display:block; color:var(--color-text-heading); font-size:var(--font-size-12);
  font-weight:var(--font-weight-form-label); margin:0 0 var(--label-margin) 0; }
.form-control, .form-select, input, textarea, select {
  color:var(--color-text-heading); padding:var(--padding-form-control-y) var(--padding-form-control-x);
  border:var(--border-width) solid var(--color-border); border-radius:var(--radius-input);
  background:var(--color-bg-surface); font-size:var(--font-size-13);
  font-family:var(--font-family-base); transition:var(--transition-base); }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--color-focus)!important; box-shadow:var(--focus-ring); }
.form-control::placeholder, input::placeholder { color:var(--color-text-placeholder); }
.form-control:disabled { opacity:.6; cursor:not-allowed; }

/* Card */
.card { background:var(--color-bg-surface); border:var(--border-width) solid transparent; border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); margin-bottom:var(--space-6); transition:var(--transition-base); overflow:hidden; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-5) var(--space-5); border-bottom:var(--border-width) solid var(--color-border); }
.card-title { margin:0; color:var(--color-text-heading); font-size:var(--font-size-16);
  font-weight:var(--font-weight-card-title); }
.card-body { padding:var(--space-5); color:var(--color-text-body); }

/* Avatar */
.avatar-text, .avatar-image { display:inline-flex; align-items:center; justify-content:center;
  width:var(--size-avatar); height:var(--size-avatar); border-radius:var(--radius-circle);
  background:var(--color-bg-surface); border:var(--border-width) solid var(--color-border-strong);
  color:var(--color-text-heading); font-weight:var(--font-weight-heading); overflow:hidden; }
.avatar-text.avatar-md{width:var(--size-avatar-md);height:var(--size-avatar-md)}
.avatar-text.bg-primary{background:var(--color-primary);color:var(--color-bg-surface);border-color:var(--color-primary)}
.avatar-image { background:var(--color-gray-200); }
.avatar-image .av { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--color-text-muted); font-size:var(--font-size-13); font-weight:var(--font-weight-strong); }

/* Icon (SVG inline estilo feather — currentColor, stroke 2) */
.icon { width:var(--icon-size); height:var(--icon-size); stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:middle; }
.icon-lg { width:var(--icon-size-head-link); height:var(--icon-size-head-link); }
.icon-md { width:var(--icon-size-menu); height:var(--icon-size-menu); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important; } }

/* Escopo de container para página-piloto (usa tokens) */
.scope-page { max-width:var(--width-content); margin:0 auto; padding:var(--space-6); }

/* ============================================================
   .table — componente derivado de design_system.html (RF-UI-002).
   Tokens canônicos: --padding-table-*, --color-table-accent,
   --color-border, --font-size-10, --font-weight-table-th,
   --text-transform-table-th, --transition-base.
   ============================================================ */
.table-responsive { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; color:var(--color-text-heading); }
.table thead th { padding:var(--padding-table-th-y) var(--padding-table-cell);
  font-size:var(--font-size-10); font-weight:var(--font-weight-table-th);
  text-transform:var(--text-transform-table-th); border-bottom:var(--border-width) solid var(--color-border); text-align:left; }
.table thead th:first-child { padding-left:var(--padding-table-x-outer); }
.table thead th:last-child { padding-right:var(--padding-table-x-outer); }
.table td { padding:var(--padding-table-th-y) var(--padding-table-cell);
  border-bottom:var(--border-width) solid var(--color-border); vertical-align:middle; }
.table td:first-child { padding-left:var(--padding-table-x-outer); }
.table td:last-child { padding-right:var(--padding-table-x-outer); }
.table tbody tr:last-child td { border-bottom:0; }
.table-hover tbody tr { transition:var(--transition-base); }
.table-hover tbody tr:hover { background:var(--color-table-accent); }
.table td.actions, .table th.actions { text-align:end; }
.table td .nowrap { white-space:nowrap; }

/* ============================================================
   .messages — feedback ao usuário (RF-UI-002, AC-016).
   Níveis do Django (debug/info/success/warning/error) mapeados para
   tokens soft do DS (bg-soft-* + text-*). Sem cores hardcoded.
   ============================================================ */
.messages { display:flex; flex-direction:column; gap:var(--space-half);
  max-width:var(--width-content); margin:var(--space-4) auto 0 auto;
  padding:0 var(--space-6); }
.message { display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-card);
  border:var(--border-width) solid var(--color-border); font-size:var(--font-size-13); }
.message-text { color:var(--color-text-heading); }
.message-debug, .message-info { background:var(--color-soft-primary); color:var(--color-primary); }
.message-success { background:var(--color-soft-success); color:var(--color-success); }
.message-warning { background:var(--color-soft-warning); color:var(--color-warning); }
.message-error { background:var(--color-soft-danger); color:var(--color-danger); }