/* LedgerAI design tokens, single source of truth for color + radius + spacing
 *
 * Replaces the 19 `:root` blocks that had accumulated across landing pages,
 * the blog, the dashboard, pricing, and auxiliary pages. Each page used to
 * redeclare its own palette, causing silent drift when one page picked up a
 * different shade of "blue".
 *
 * Three palette groups coexist in this file. Each page consumes only the
 * tokens it references; unused tokens cost nothing.
 *
 * 1. Marketing / light-theme palette
 *    Used by: landing_*.html, pricing.html, refer.html, security.html,
 *             upgrade.html, ledgerai_report.html
 *
 * 2. Blog dark-theme palette
 *    Used by: blog.html, blog_*.html
 *
 * 3. Dashboard / product palette
 *    Used by: dashboard.html
 *
 * Shared values (e.g. #1d4ed8 = "blue") are deliberately duplicated under
 * both legacy names so the original page CSS keeps rendering unchanged.
 * Renaming to a single canonical token set is a follow-up refactor.
 *
 * To add a new token: add it here first, then reference it via var() from
 * any page. Do not re-introduce inline :root blocks in individual files.
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Batch 1 (May 2026): horizontal-overflow guard for public pages.
 * Mobile QA found 5-12px right-side clipping on /signup at 375px and
 * 390px. Defensive box-sizing + viewport-bounded width + overflow-x:
 * hidden on the document root makes any accidental wide child (long
 * email input, hero h1 wrap, etc.) clip instead of scrolling the page
 * sideways. Affects every page that loads tokens.css; harmless on
 * dashboard surfaces because all their containers stay inside the
 * viewport anyway.
 * ─────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  /* ────────────────────────────────────────────────────────────────────────
   * Sage Companion palette (used by app_shell.css + signup / login).
   * Centralised here so landing/pricing can opt in via var() without
   * re-declaring; the legacy marketing tokens below stay so existing
   * page CSS keeps rendering unchanged.
   * ──────────────────────────────────────────────────────────────────────── */
  --cream:       #FBF8EF;
  --paper:       #FFFFFF;
  --ink:         #28281E;
  --ink-soft:    #3D3D30;
  --muted:       #807E70;
  --clay:        #4F6B45;
  --clay-deep:   #354A2F;
  --clay-soft:   #DEE8D7;
  --clay-line:   rgba(79, 107, 69, 0.18);
  --sage:        #B58940;
  --rule:        rgba(79, 107, 69, 0.18);
  --warning:     #B45309;

  /* ────────────────────────────────────────────────────────────────────────
   * Marketing / light-theme (landing, pricing, refer, security, upgrade)
   * ──────────────────────────────────────────────────────────────────────── */
  --blue:    #1d4ed8;
  --blue2:   #3b82f6;
  --dark:    #0f172a;
  --gray:    #64748b;
  --light:   #f8fafc;
  --green:   #16a34a;
  --gold:    #d97706;
  --red:     #dc2626;
  --radius:  14px;

  /* Aliases used by a few marketing pages that declared their own names. */
  --accent:  #1d4ed8;
  --purple:  #7c3aed;
  --border:  #e2e8f0;
  --card-bg: #ffffff;

  /* ────────────────────────────────────────────────────────────────────────
   * Blog dark-theme palette
   * ──────────────────────────────────────────────────────────────────────── */
  --navy:       #0f172a;
  --navy-mid:   #1e293b;
  --navy-light: #334155;
  --blue-hover: #1e40af;
  --blue-light: #3b82f6;
  --text:       #e2e8f0;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --white:      #ffffff;
  --accent-bg:  #172033;

  /* Blog-context override for --border and --card-bg. Marketing pages that
   * use --border expect light grey; blog pages expect navy. These are
   * scoped below in [data-theme] selectors so the default (marketing)
   * stays intact. */

  /* ────────────────────────────────────────────────────────────────────────
   * Dashboard / product palette
   * ──────────────────────────────────────────────────────────────────────── */
  --sidebar: #0f172a;
}

/* Blog pages opt into the dark theme via `data-theme="blog"` on <html> or
 * <body>. If a blog page doesn't set that attribute (legacy), its inline
 * styles continue to reference --border etc. directly and still work -
 * the marketing defaults above produce the light values, which the blog's
 * own page-level styles then override with their hardcoded navy backgrounds.
 * Pages that DO set data-theme="blog" will pick up these context tokens:
 */
[data-theme="blog"] {
  --border:  #1e293b;
  --card-bg: #111827;
}