/* Posteiro UI — Bootstrap-first brand tokens
   Keep this file small: only brand tokens + a few glue rules. */

:root {
  --po-bg: #f4f5f7;
  --po-surface: #ffffff;
  --po-text: #111827;
  --po-muted: #6b7280;
  --po-border: #e5e7eb;
  --po-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

  --po-brand: #111827;
  --po-brand-2: #000000;
}

html, body {
  height: 100%;
}

body {
  background-color: #f8f9fb;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(59,130,246,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(99,102,241,0.04) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--po-text);
}

.po-app {
  min-height: 100vh;
}

.po-sidebar {
  background: rgba(245, 245, 245, 0.92);
  border-right: 1px solid var(--po-border);
}

.po-card {
  background: var(--po-surface);
  border: 1px solid var(--po-border);
  box-shadow: var(--po-shadow);
  border-radius: 16px;
}

.po-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--po-border);
}

.po-table thead th {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--po-muted);
  background: rgba(250, 250, 250, 0.9);
}

.po-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Make focus visible even on custom components */
:focus-visible {
  outline: 3px solid rgba(17, 24, 39, 0.18);
  outline-offset: 2px;
}