/* =========================================================================
   FKweb — Componentes
   Todos consomem apenas tokens semânticos (tokens.css §7/§8),
   portanto funcionam nos temas claro e escuro sem alteração.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Botão
   ------------------------------------------------------------------------- */
.fk-btn {
  --_bg: transparent;
  --_fg: var(--fk-text);
  --_bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fk-space-3);
  padding: var(--fk-space-4) var(--fk-space-7);
  border: 1px solid var(--_bd);
  border-radius: var(--fk-radius-md);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--fk-text-sm);
  font-weight: var(--fk-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--fk-duration-fast) var(--fk-ease),
    border-color var(--fk-duration-fast) var(--fk-ease),
    color var(--fk-duration-fast) var(--fk-ease),
    transform var(--fk-duration-fast) var(--fk-ease),
    box-shadow var(--fk-duration-fast) var(--fk-ease);
}
/* O `a:hover` de base.css tem especificidade maior que `.fk-btn` (0,1,1
   contra 0,1,0) e pinta a cor por cima de --_fg. Num botão que é link o
   texto virava terracota — a mesma cor do preenchimento que sobe no hover,
   ou seja, sumia. A variante volta a mandar na cor. */
a.fk-btn:hover,
a.fk-btn:focus-visible { color: var(--_fg); }

.fk-btn:active { transform: translateY(1px); }
.fk-btn:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }
.fk-btn[disabled], .fk-btn[aria-disabled="true"] {
  opacity: .45; pointer-events: none;
}
.fk-btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Variantes */
.fk-btn--primary {
  --_bg: var(--fk-accent);
  --_fg: var(--fk-accent-contrast);
  --_bd: var(--fk-accent);
}
.fk-btn--primary:hover { --_bg: var(--fk-accent-hover); --_bd: var(--fk-accent-hover); }

.fk-btn--secondary {
  --_bg: transparent;
  --_fg: var(--fk-text);
  --_bd: var(--fk-border-strong);
}
.fk-btn--secondary:hover { --_bd: var(--fk-accent); --_fg: var(--fk-accent); }

.fk-btn--solid {
  --_bg: var(--fk-text);
  --_fg: var(--fk-text-inverse);
  --_bd: var(--fk-text);
}
.fk-btn--solid:hover { --_bg: var(--fk-cinza-700); --_bd: var(--fk-cinza-700); }

.fk-btn--soft {
  --_bg: var(--fk-accent-soft);
  --_fg: var(--fk-text-brand);
  --_bd: transparent;
}
.fk-btn--soft:hover { --_bd: var(--fk-accent); }

.fk-btn--ghost { --_bg: transparent; --_fg: var(--fk-text-muted); --_bd: transparent; }
.fk-btn--ghost:hover { --_bg: var(--fk-surface-inset); --_fg: var(--fk-text); }

/* Tamanhos */
.fk-btn--sm { padding: var(--fk-space-3) var(--fk-space-5); font-size: var(--fk-text-xs); border-radius: var(--fk-radius-sm); }
.fk-btn--lg { padding: var(--fk-space-5) var(--fk-space-9); font-size: var(--fk-text-md); border-radius: var(--fk-radius-lg); }
.fk-btn--pill { border-radius: var(--fk-radius-full); }
.fk-btn--block { display: flex; width: 100%; }

/* -------------------------------------------------------------------------
   Card
   ------------------------------------------------------------------------- */
.fk-card {
  background: var(--fk-surface);
  border: 1px solid var(--fk-border);
  border-radius: var(--fk-radius-lg);
  padding: var(--fk-space-8);
  box-shadow: var(--fk-shadow-sm);
}
.fk-card--flat { box-shadow: none; }
.fk-card--inset { background: var(--fk-surface-inset); border-color: transparent; box-shadow: none; }
.fk-card--brand {
  background: var(--fk-gradient-terracota);
  border-color: transparent;
  color: var(--fk-areia);
}
.fk-card--brand .fk-card__title,
.fk-card--brand .fk-muted { color: inherit; }
.fk-card__title {
  font-family: var(--fk-font-brand);
  font-size: var(--fk-text-h5);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-title);
  margin-bottom: var(--fk-space-3);
}
.fk-card__body { color: var(--fk-text-muted); font-size: var(--fk-text-sm); }
.fk-card__footer { margin-top: var(--fk-space-7); padding-top: var(--fk-space-5); border-top: 1px solid var(--fk-border); }

/* -------------------------------------------------------------------------
   Badge / Tag
   ------------------------------------------------------------------------- */
.fk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fk-space-2);
  padding: var(--fk-space-1) var(--fk-space-4);
  border-radius: var(--fk-radius-full);
  background: var(--fk-surface-inset);
  color: var(--fk-text-muted);
  font-size: var(--fk-text-xs);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: .01em;
  line-height: 1.6;
}
.fk-badge--brand   { background: var(--fk-accent-soft); color: var(--fk-text-brand); }
.fk-badge--solid   { background: var(--fk-accent);  color: var(--fk-accent-contrast); }
.fk-badge--success { background: var(--fk-success-bg); color: var(--fk-success); }
.fk-badge--warning { background: var(--fk-warning-bg); color: var(--fk-warning); }
.fk-badge--danger  { background: var(--fk-danger-bg);  color: var(--fk-danger); }
.fk-badge--outline { background: transparent; border: 1px solid var(--fk-border-strong); }

/* -------------------------------------------------------------------------
   Campos de formulário
   ------------------------------------------------------------------------- */
.fk-field { display: grid; gap: var(--fk-space-3); }
.fk-label {
  font-size: var(--fk-text-sm);
  font-weight: var(--fk-weight-semibold);
  color: var(--fk-text);
}
.fk-input, .fk-textarea, .fk-select {
  width: 100%;
  padding: var(--fk-space-4) var(--fk-space-5);
  background: var(--fk-surface);
  border: 1px solid var(--fk-border-strong);
  border-radius: var(--fk-radius-md);
  color: var(--fk-text);
  font-size: var(--fk-text-sm);
  transition: border-color var(--fk-duration-fast) var(--fk-ease), box-shadow var(--fk-duration-fast) var(--fk-ease);
}
.fk-input::placeholder, .fk-textarea::placeholder { color: var(--fk-text-subtle); }
.fk-input:focus, .fk-textarea:focus, .fk-select:focus {
  outline: none;
  border-color: var(--fk-accent);
  box-shadow: var(--fk-focus-ring);
}
.fk-input[aria-invalid="true"] { border-color: var(--fk-danger); }
.fk-hint { font-size: var(--fk-text-xs); color: var(--fk-text-muted); }
.fk-error { font-size: var(--fk-text-xs); color: var(--fk-danger); font-weight: var(--fk-weight-medium); }

/* -------------------------------------------------------------------------
   Alerta
   ------------------------------------------------------------------------- */
.fk-alert {
  display: flex;
  gap: var(--fk-space-5);
  padding: var(--fk-space-5) var(--fk-space-6);
  border-radius: var(--fk-radius-md);
  border-left: 3px solid var(--fk-accent);
  background: var(--fk-surface-inset);
  font-size: var(--fk-text-sm);
}
.fk-alert--success { border-left-color: var(--fk-success); background: var(--fk-success-bg); color: #1F4433; }
.fk-alert--warning { border-left-color: var(--fk-warning); background: var(--fk-warning-bg); color: #6B4610; }
.fk-alert--danger  { border-left-color: var(--fk-danger);  background: var(--fk-danger-bg);  color: #6E2419; }

/* -------------------------------------------------------------------------
   Tabela
   ------------------------------------------------------------------------- */
.fk-table { width: 100%; border-collapse: collapse; font-size: var(--fk-text-sm); }
.fk-table th {
  text-align: left;
  padding: var(--fk-space-4) var(--fk-space-5);
  font-size: var(--fk-text-xs);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--fk-text-muted);
  border-bottom: 1px solid var(--fk-border-strong);
}
.fk-table td {
  padding: var(--fk-space-4) var(--fk-space-5);
  border-bottom: 1px solid var(--fk-border);
  vertical-align: middle;
}
.fk-table tbody tr:last-child td { border-bottom: 0; }
.fk-table--zebra tbody tr:nth-child(odd) td { background: var(--fk-surface-inset); }

/* -------------------------------------------------------------------------
   Amostra de cor
   ------------------------------------------------------------------------- */
.fk-swatch {
  border-radius: var(--fk-radius-md);
  overflow: hidden;
  border: 1px solid var(--fk-border);
  background: var(--fk-surface);
}
.fk-swatch__chip {
  height: 96px;
  border-bottom: 1px solid var(--fk-border);
}
.fk-swatch__meta { padding: var(--fk-space-4) var(--fk-space-5); }
.fk-swatch__name {
  font-size: var(--fk-text-sm);
  font-weight: var(--fk-weight-semibold);
  margin-bottom: 2px;
}
.fk-swatch__hex {
  font-family: var(--fk-font-mono);
  font-size: var(--fk-text-xs);
  color: var(--fk-text-muted);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Logo
   ------------------------------------------------------------------------- */
.fk-logo { display: inline-flex; align-items: center; }
.fk-logo svg, .fk-logo img { height: 100%; width: auto; }
.fk-logo--xs { height: 20px; }
.fk-logo--sm { height: 28px; }
.fk-logo--md { height: 40px; }
.fk-logo--lg { height: 64px; }
.fk-logo--xl { height: 96px; }

/* -------------------------------------------------------------------------
   Avatar / ícone de app
   ------------------------------------------------------------------------- */
.fk-appicon {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: var(--fk-radius-xl);
  background: var(--fk-grafite);
  overflow: hidden;
}
.fk-appicon--light { background: var(--fk-areia); }
.fk-appicon--brand { background: var(--fk-gradient-terracota); }
.fk-appicon svg { width: 62%; height: auto; }