/* Shared design tokens + base components for every server-rendered page
   (marketing, auth, legal, onboarding). Loaded before each page's own
   stylesheet, so its own rules can still add page-specific styling on top
   without needing to redeclare the palette or re-invent shared components.

   Previously each of landing.css/auth.css/legal.css/onboard_success.css
   defined its own copy of this same :root block by hand - same intended
   values, but already drifted (landing.css was missing --danger, forcing a
   raw hex duplicate elsewhere; --plane and --paper were two names for the
   identical color). This file is now the single source of truth; the
   per-page stylesheets keep only what's actually specific to them. */

:root {
  --surface: #ffffff;
  --plane: #f6f5f2;
  --card: #ffffff;
  --ink: #14140f;
  --ink-2: #4a493f;
  --ink-muted: #85836f;
  --border: rgba(20, 20, 15, 0.11);
  --grid: #e6e4da;
  --brand: #0d3d34;
  --brand-2: #14524a;
  --accent: #1a8f6b;
  --danger: #b8452f;
  --shadow-sm: 0 1px 2px rgba(13, 61, 52, 0.06);
  --shadow-md: 0 4px 16px rgba(13, 61, 52, 0.08);
  --shadow-lg: 0 16px 40px rgba(13, 61, 52, 0.14);
}

* { box-sizing: border-box; }

/* Visible keyboard-focus ring, site-wide - previously :focus-visible was
   used nowhere at all; several inputs set outline:none with only a
   border-color swap as the replacement, which is a weak indicator for
   keyboard users navigating with Tab. This targets :focus-visible
   specifically (not plain :focus), so mouse/touch clicks still don't show
   a ring - only actual keyboard navigation does. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 143, 107, 0.35);
}

/* One canonical content width instead of each page picking its own via
   inline styles (previously: max-width:none by default, then patched with
   8+ different values - 460/520/620/640/720/760/1080px - across pages). */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}

/* ==========================================
   Buttons - one shared visual identity for every "primary/secondary
   action" button across marketing (was .cta-btn/.cta-btn.ghost), auth
   (was button.submit/.btn-outline), and anywhere else. Layout concerns
   (full-width in a narrow form, compact inline) are separate modifier
   classes, kept apart from the button's visual identity itself.
   ========================================== */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 26px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--ink);
  color: white;
  border: none;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--brand); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-secondary:hover { border-color: var(--ink); }
.btn-secondary:disabled { opacity: 0.6; cursor: default; }

/* Compact inline variant - was auth.css's standalone .btn-outline */
.btn-secondary.btn-sm {
  padding: 9px 14px;
  font-size: 13px;
  border-color: var(--grid);
  color: var(--ink-2);
}
.btn-secondary.btn-sm:hover { border-color: var(--brand-2); color: var(--brand-2); }

/* Full-width variant - form submit buttons inside a narrow auth .card */
.btn-primary.btn-block { display: flex; width: 100%; }

/* ==========================================
   Alerts/banners - one shared success/error component (was .form-banner
   in landing.css and .success-banner/.error-banner in auth.css, same
   color formulas, different radius/padding/font-size/margin).
   ========================================== */
.success-banner,
.error-banner {
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 13.5px;
  margin-bottom: 20px;
}
.success-banner { background: rgba(26, 143, 107, 0.1); color: var(--accent); border: 1px solid rgba(26, 143, 107, 0.25); }
.error-banner { background: rgba(184, 69, 47, 0.1); color: var(--danger); border: 1px solid rgba(184, 69, 47, 0.25); }