/* Posteiro UI — Bootstrap-first brand tokens
   Keep this file small: only brand tokens + a few glue rules.
   Updated to match Stripe-inspired design system. */

:root {
  --po-bg: #f6f9fc;
  --po-surface: #ffffff;
  --po-text: #1a1f36;
  --po-muted: #697386;
  --po-border: #e3e8ee;
  --po-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);

  --po-brand: #635bff;
  --po-brand-2: #4b45c6;
}

html, body {
  height: 100%;
}

body {
  background-color: var(--po-bg);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(99,91,255,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(124,58,237,0.03) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--po-text);
}

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

.po-sidebar {
  background: rgba(248,249,252,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: 0.75rem;
}

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

.po-table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--po-muted);
  border-bottom: 1px solid var(--po-border);
}