/*
 * base.css — Base typography and body canvas
 *
 * Phase B of design system architecture refactor (2026-05-20).
 * Governing SOW: ThomOS/Merlin/Scopes/SOW_design_system_architecture_2026-05-20.md
 *
 * Loaded AFTER tokens.css and mpower.css. Establishes the PRO-T base canvas:
 * body font-family, background, color, and base font-size. Component-level
 * styling (cards, pills, charts) lives in components.css (Phase C). Layout
 * chrome (topnav, sidebar, page-header) lives in layout.css.
 *
 * Note on: declarations are marked transitionally to
 * override mpower.css's base rules until mpower.css is deleted in Phase E.
 * Once that happens, here can be dropped — the cascade alone
 * will be authoritative.
 */

/* ----- Reset -----
 * Migrated from mpower.css (Phase E-2). Standard reset:
 * zeroes margins/padding and switches to border-box sizing model. */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--pro-sans);
  background: var(--pro-bg);
  color: var(--pro-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ----- Grid background texture -----
 * The subtle dot/line grid visible behind page content.
 * Rendered by an empty <div class="grid-bg"></div> in base.html.
 * Migrated from mpower.css (Phase E-2). */
.grid-bg {
  background-image:
    linear-gradient(rgba(46, 86, 135, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 86, 135, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  opacity: 0.4;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ----- Table defaults -----
 * Base HTML table styling. Pages with data-table styling override these.
 * Migrated from mpower.css (Phase E-2). */
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--pro-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--pro-border);
}
td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--pro-border);
  font-size: 14px;
}
tr:hover { background: rgba(46, 86, 135, 0.04); }

/* Theme transition smoothing on chrome surfaces */
.sidebar, .topnav, .card, .tool-card, .input, .btn-secondary {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}