/* Sealer Zone — design tokens & base styles
   Light, restrained, operational. Tailwind (CDN) does the heavy lifting;
   this file holds the brand font, a few component primitives, and fine-tuning. */

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ring: #2563eb;        /* blue-600  — primary accent (restrained) */
  --ok: #16a34a;          /* green-600 — operational: good/won/in-stock */
  --warn: #d97706;        /* amber-600 — operational: attention/needs review */
  --bad: #dc2626;         /* red-600   — operational: overdue/lost/urgent */
  --pt: #4f46e5;          /* indigo-600 — Portuguese language signal */
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html, body { font-family: var(--font-sans); }
body { background: #f8fafc; color: #0f172a; }

/* tabular numerals for tables / metrics */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* restrained, thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; border: 2px solid #f8fafc; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* sidebar nav links */
.nav-link { position: relative; transition: background-color .12s ease, color .12s ease; }
.nav-link.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.nav-link.active::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--ring);
}
.nav-link:not(.active):hover { background: #f1f5f9; }

/* card primitives */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; }
.card-sm { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
.shadow-soft { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); }
.shadow-pop { box-shadow: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); }

/* dense table — 13px body, tabular numerals, hairline rows (Linear/Twenty density) */
.tbl { font-variant-numeric: tabular-nums; }
.tbl th { font-weight: 600; color: #64748b; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.tbl td { font-size: 13px; }
.tbl td, .tbl th { white-space: nowrap; }
.tbl tbody tr { transition: background-color .1s ease; }
.tbl tbody tr:hover { background: #f8fafc; }

/* "Preview" diagonal tint for static screens */
.preview-tint { background-image: repeating-linear-gradient(45deg, #fffbeb, #fffbeb 12px, #fef3c7 12px, #fef3c7 24px); }

/* subtle entrance */
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .25s ease both; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px;
}

/* keyboard hint */
kbd { font-family: var(--font-sans); font-size: 10px; line-height: 1;
  padding: 2px 5px; border: 1px solid #e2e8f0; border-bottom-width: 2px; border-radius: 5px; color: #64748b; background: #fff; }