/* Bogatell design tokens (from bogatell.io) */
:root {
  --primary: hsl(217 82% 52%);
  --primary-foreground: hsl(0 0% 100%);
  --foreground: hsl(219 42% 13%);
  --background: hsl(0 0% 100%);
  --muted: hsl(214 24% 96%);
  --muted-foreground: hsl(219 20% 40%);
  --border: hsl(214 24% 87%);
  --ink: hsl(220 42% 10%);
  --success: hsl(153 70% 32%);
  --warning: hsl(32 89% 42%);
  --danger: hsl(0 72% 45%);
  --xero: hsl(190 76% 51%);
  --quickbooks: hsl(133 62% 37%);
  --radius: .375rem;
}

* { box-sizing: border-box; }

body {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  color: var(--foreground);
  background: hsl(214 24% 98%);
  margin: 0;
  line-height: 1.55;
}

a { color: var(--primary); }

main { max-width: 64rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

nav.topbar {
  display: flex; align-items: center; gap: 1.75rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
  background: #fff;
}
nav.topbar .brand {
  font-weight: 800; color: var(--ink); text-decoration: none;
  letter-spacing: -.02em;
}
nav.topbar .brand .star { color: var(--primary); }
nav.topbar a { text-decoration: none; color: var(--muted-foreground); font-size: .9rem; font-weight: 600; }
nav.topbar a:hover { color: var(--ink); }

.eyebrow {
  font-size: .65rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--primary); margin: 0 0 .5rem;
}
h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 1.25rem; }
h3 { letter-spacing: -.01em; color: var(--ink); }

.btn {
  display: inline-block; padding: .55rem 1.1rem; border-radius: var(--radius);
  background: var(--ink); color: #fff;
  border: none; font: inherit; font-weight: 700; font-size: .875rem; cursor: pointer;
  text-decoration: none; transition: background .15s;
}
.btn:hover { background: var(--primary); filter: none; }
.btn.primary { background: var(--primary); }
.btn.primary:hover { background: var(--ink); }
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--border);
}
.btn.ghost:hover { border-color: var(--ink); background: transparent; }

.card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem 1.75rem; margin-bottom: 1rem; background: #fff;
}

input[type="email"], input[type="text"], select {
  padding: .55rem .8rem; border: 1px solid var(--border);
  border-radius: var(--radius); font: inherit; width: 100%;
  max-width: 24rem; background: #fff; color: var(--ink);
}
input:focus, select:focus {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
label { font-weight: 700; font-size: .85rem; color: var(--ink); }

/* Login page */
.auth-wrap { max-width: 26rem; margin: 4rem auto 0; }
.auth-wrap .eyebrow { text-align: center; }
.auth-wrap h1 { text-align: center; font-size: 1.6rem; }
.auth-sub { text-align: center; color: var(--muted-foreground); font-size: .9rem; margin: -0.75rem 0 1.5rem; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .7rem 1rem; margin-bottom: .6rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--ink); font: inherit; font-weight: 700;
  font-size: .9rem; text-decoration: none; cursor: pointer; transition: border-color .15s;
}
.sso-btn:hover { border-color: var(--ink); }
.sso-btn .dot { width: .7rem; height: .7rem; border-radius: 999px; display: inline-block; }
.sso-btn .dot.xero { background: var(--xero); }
.sso-btn .dot.qbo { background: var(--quickbooks); }
.divider {
  display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0;
  color: var(--muted-foreground); font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.badge {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: #fff;
}
.badge.test { background: var(--warning); }
.badge.hold { background: var(--warning); }

.pill-filters { display: flex; gap: .5rem; margin: 0 0 1rem; }
.pill {
  padding: .3rem .9rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--background); color: var(--muted-foreground);
  font-size: .85rem; font-weight: 700; text-decoration: none;
}
.pill:hover { border-color: var(--primary); color: var(--primary); }
.pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.badge.live { background: var(--success); }
.badge.xero { background: var(--xero); }
.badge.qbo { background: var(--quickbooks); }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted-foreground); font-size: .85rem; }

.muted { color: var(--muted-foreground); }