/* Fascínius — tema para ferramentas internas | v3
   Referência: loja pública observada em 26/09/2026. Carregue antes do CSS do app. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --fs-ink: #252525; --fs-muted: #626262;
  --fs-paper: #ffffff; --fs-canvas: #f7f6f5; --fs-line: #dedbd9;
  --fs-dark: #252525; --fs-soft: #eeecea; --fs-soft-hover: #f2f0ee;
  --fs-action: #252525; --fs-action-hover: #424242; --fs-action-text: #ffffff;
  --fs-accent: var(--fs-ink); --fs-accent-soft: var(--fs-soft);
  --fs-focus: #252525;
  --fs-success: #286448; --fs-success-bg: #e8f4ed;
  --fs-warning: #925218; --fs-warning-bg: #fff0df;
  --fs-danger: #973441; --fs-danger-bg: #fdeeef;
  --fs-info: #315f78; --fs-info-bg: #eaf3f8;
  --fs-font-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --fs-font-body: "Montserrat", "Segoe UI", Arial, sans-serif;
  --fs-text-sm: .875rem; --fs-text-base: 1rem;
  --fs-title-lg: clamp(1.5rem, 2vw, 2rem);
  --fs-radius-sm: 6px; --fs-radius-md: 10px; --fs-radius-lg: 14px;
  --fs-shadow: 0 8px 24px rgb(37 37 37 / 6%);
  --fs-shadow-lg: 0 22px 56px rgb(37 37 37 / 18%);
  --fs-space-1: 4px; --fs-space-2: 8px; --fs-space-3: 12px;
  --fs-space-4: 16px; --fs-space-5: 24px; --fs-space-6: 32px;
  --fs-control-height: 44px;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fs-font-body); font-size: var(--fs-text-base);
  line-height: 1.5; color: var(--fs-ink); background: var(--fs-canvas);
}
h1, h2, h3, .fs-display {
  font-family: var(--fs-font-display); font-weight: 600;
  line-height: 1.22; letter-spacing: -.025em;
}
::selection { background: var(--fs-soft); color: var(--fs-ink); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--fs-focus); outline-offset: 3px;
}
:where(input, select, textarea, button) { font: inherit; }
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border: 1px solid var(--fs-line); border-radius: var(--fs-radius-sm);
  background: var(--fs-paper); color: var(--fs-ink);
}
:where(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: var(--fs-control-height); }
:where(input, select, textarea):focus-visible { border-color: var(--fs-focus); }
:where(button):disabled { opacity: .5; cursor: not-allowed; }

/* Componentes opt-in: não impõem estilos sobre os controles existentes. */
.fs-card {
  background: var(--fs-paper); border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow);
}
.fs-button, .fs-button-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--fs-space-2); min-height: var(--fs-control-height);
  padding: 10px 18px; border-radius: var(--fs-radius-sm);
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.fs-button {
  border: 1px solid var(--fs-action); background: var(--fs-action);
  color: var(--fs-action-text);
}
.fs-button:hover { border-color: var(--fs-action-hover); background: var(--fs-action-hover); }
.fs-button-secondary {
  border: 1px solid #a9a5a3; background: var(--fs-paper); color: var(--fs-ink);
}
.fs-button-secondary:hover { background: var(--fs-soft-hover); border-color: var(--fs-accent); }
.fs-link { color: var(--fs-accent); text-decoration: underline; text-underline-offset: 3px; }
.fs-link:hover { color: var(--fs-ink); }
.fs-label { display: block; margin-bottom: 6px; font-size: var(--fs-text-sm); font-weight: 600; }
.fs-help { color: var(--fs-muted); font-size: var(--fs-text-sm); }
.fs-field-error { color: var(--fs-danger); font-size: var(--fs-text-sm); }
.fs-badge {
  display: inline-flex; align-items: center; padding: 4px 9px;
  border-radius: 999px; background: var(--fs-accent-soft);
  color: var(--fs-ink); font-size: .8125rem; font-weight: 600;
}
.fs-badge[data-tone="success"] { background: var(--fs-success-bg); color: var(--fs-success); }
.fs-badge[data-tone="warning"] { background: var(--fs-warning-bg); color: var(--fs-warning); }
.fs-badge[data-tone="danger"] { background: var(--fs-danger-bg); color: var(--fs-danger); }
.fs-badge[data-tone="info"] { background: var(--fs-info-bg); color: var(--fs-info); }
.fs-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fs-table th, .fs-table td { padding: 12px 16px; border-bottom: 1px solid var(--fs-line); text-align: left; }
.fs-table th { background: var(--fs-canvas); font-size: var(--fs-text-sm); font-weight: 600; }
.fs-table tbody tr:hover { background: var(--fs-soft-hover); }
.fs-signature { color: var(--fs-muted); font-size: .75rem; text-align: center; }
@media (max-width: 640px) {
  .fs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fs-button, .fs-button-secondary { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important; animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}