/* Shared design tokens + reset, loaded on every page. Page-specific
   styles live in marketing.css / auth.css / app.css. */
:root {
  color-scheme: light;
  --navy-950: #0a1128;
  --navy-900: #0f1b3d;
  --navy-800: #14245a;
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-100: #dbeafe;
  --blue-50: #eff6ff;
  --green-800: #065f46;
  --green-700: #047857;
  --green-600: #059669;
  --green-500: #10b981;
  --green-100: #d1fae5;
  --green-50: #ecfdf5;
  --amber-800: #9a3412;
  --amber-700: #c2410c;
  --amber-600: #ea580c;
  --amber-500: #f97316;
  --amber-100: #ffedd5;
  --amber-50: #fff7ed;
  --white: #ffffff;
  --slate-900: #0f172a;
  --slate-600: #475569;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --danger: #dc2626;
  --warn: #b45309;
  --ok: #15803d;

  --bg: var(--white);
  --fg: var(--slate-900);
  --muted: var(--slate-600);
  --muted-2: #94a1b8;
  /* Panels used to be a flat grey fill (--slate-50) with a heavy 1px
     border doing all the separating work — the single biggest reason
     the app read as dated ("early 2000s" per Matthew's own words).
     --panel is now near-white, distinguished from --bg mostly by
     --shadow-sm (a real card, not a grey box); --border stays for the
     few places that still genuinely need a hairline (dividers, inputs). */
  --border: var(--slate-200);
  --panel: #fbfcfe;
  --accent: var(--blue-600);
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px -10px rgba(15,23,42,0.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --fg: #e6ebf5; --muted: #94a3b8; --muted-2: #6b7690; --border: #1f2b44; --panel: #121b30;
    --accent: var(--blue-500); --danger: #ff8a80; --warn: #ffc069; --ok: #6bd28a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.25), 0 6px 18px -10px rgba(0,0,0,0.5);
  }
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
}
a { color: var(--accent); }
h1, h2, h3 { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.02em; }

/* Wherever digits line up (money, day counts, dates) — keeps a column
   of numbers from jittering left-right as digit widths vary. */
.num { font-variant-numeric: tabular-nums; }

button { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 0.6rem 1.15rem; cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: filter 0.15s, transform 0.15s, box-shadow 0.15s; box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 45%, transparent); }
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; box-shadow: none; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--border); box-shadow: none; }
button.secondary:hover { border-color: var(--accent); }

/* font-size is hardcoded to 16px, not a rem unit — below 16px, iOS
   Safari auto-zooms the whole page on focus (a real, well-known
   mobile bug, not a style preference), and every form field in the
   app inherits from this one rule. Hardcoded rather than 1rem so it
   stays correct even if the root font-size ever changes elsewhere. */
select, input, textarea { padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 16px; font-family: inherit; }
select:focus, input:focus { outline: 2px solid var(--blue-500); outline-offset: 1px; }

.empty { color: var(--muted); font-style: italic; }
.error { color: var(--danger); font-size: 0.85rem; margin-top: 0.5rem; }
.hint { color: var(--muted); font-size: 0.9rem; }

/* Billable logomark — used on marketing + auth pages */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--blue-600), var(--navy-800));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; font-family: "Inter", sans-serif;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.35);
  flex-shrink: 0;
}
.brand-word { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--fg); }
.brand-group { display: inline-flex; flex-direction: column; }
.brand-sub { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate-400); margin-top: 0.05rem; }