/* ========================================================================
   Imprest marketing site — SHARED CHROME (nav, footer, buttons, tokens)
   ========================================================================

   Split out of styles.css so the app/(docs) surface can wear the same top nav
   and footer as app/(marketing) WITHOUT inheriting marketing's page-content
   styles. styles.css carries bare element selectors (`html, body`, `h1`-`h4`,
   `a`) that are correct for marketing pages and wrong for the Tailwind-built
   docs pages: linking the whole sheet there repainted every docs heading in
   the marketing serif at the brand teal, and the body warm paper.

   Load order matters. This file defines the design tokens that styles.css
   resolves against, so it must be linked FIRST:

     (marketing)/layout.tsx  ->  chrome.css, then styles.css
     (docs)/layout.tsx       ->  chrome.css only

   styles.css is therefore no longer self-sufficient. Do not link it without
   this file. Equally, do not move a rule that targets a bare element into
   here — element rules are exactly what the docs surface must not receive.
   ======================================================================== */

:root {
  /* ---- Surfaces — mirror product tokens ---- */
  --bg: #FCFAF8;              /* product's --color-workspace — warm paper */
  --surface: #FFFFFF;          /* product's --color-base-100 */
  --surface-alt: #F7F8FA;      /* product's --color-base-200 */
  --ink: #3b4252;              /* product's --color-base-content — softer than pure black */
  --muted: #6b7280;            /* product's --color-text-muted */
  --dim: #9ca3af;              /* product's --color-text-dim */
  --rule: #e2e5ea;             /* product's --color-border */
  --rule-strong: #b8d8df;      /* product's --color-border-accent — pale teal */

  /* ---- Brand ---- */
  --imprest: #0c2d3b;          /* product's --color-primary — deep teal/navy */
  --imprest-dim: #f0f9fa;      /* very pale teal — onboarding gradient end */
  --accent: #cc7e2e;           /* product's --color-accent — copper */
  --accent-hover: #a8651f;     /* darker copper for hover */

  /* ---- Active / highlight surfaces ---- */
  --highlight: #f3ebe6;        /* product's --color-selected-bg — warm blush */
  --selected: #f3ebe6;         /* alias for clarity */
  --hover: #f7f8fa;            /* product's --color-hover */

  /* ---- Marketing chart palette ---- */
  /* Maps the QB-pricing-graphic colors onto product accent families. */
  --inflation: #9ca3af;        /* product's --color-text-dim */
  --essentials: #94a3b8;       /* product's --accent-slate-stripe */
  --plus: #0c2d3b;             /* product's --color-primary — brand color on the "most popular" tier */
  --advanced: #991b1b;         /* product's --accent-red-icon — serious red, not alarm red */

  /* ---- Audience accents ---- */
  --smb: #0c2d3b;              /* deep teal — brand */
  --accountant: #6b21a8;       /* product's --accent-purple-icon */

  /* ---- Flap aesthetic (carries the QBO split-flap personality) ---- */
  --flap-bg: #0F4C5C;          /* product's --color-flap-bg — dark teal */
  --flap-text: #FFFFFF;

  /* ---- Effects ---- */
  --shadow: 0 1px 3px rgba(12, 45, 59, 0.06), 0 1px 2px rgba(12, 45, 59, 0.04);
  --shadow-lg: 0 12px 32px rgba(12, 45, 59, 0.08);

  /* ---- Spacing scale (marketing-scale, extending product's 12px default) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Marketing layout container (one knob each) ----
     Width + page gutter shared by the nav, hero, boxed sections, and footer so
     they all sit the same distance from the page edge. Widen --container or
     shrink --gutter to pull everything closer to the edge. */
  --container: 1680px;
  --gutter: 24px;
  --panel-pad: 48px;        /* internal padding of each box; nav aligns to it */

  /* ---- Type scale ---- */
  --fs-eyebrow: 13px;
  --fs-body: 16px;
  --fs-lede: 19px;
  --fs-h3: 22px;
  --fs-h2: 30px;
  --fs-h1: 48px;
  --fs-display: 64px;

  /* ---- Typography font stacks — single source of truth ----
     Swap a font by changing ONLY the values below; every consuming selector
     uses `var(--font-X)`. The `-settings` variables hold font-specific
     variation axes (opsz, SOFT, wdth, etc.) so a font swap that uses
     different axes can update settings here too without touching consumers.
     Both display + wordmark fonts are SIL Open Font License (no commercial
     restrictions, embedding allowed). */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: 'Source Serif 4', ui-serif, Georgia, serif;
  --font-display-settings: 'opsz' 60;
  --font-wordmark: 'Fraunces', ui-serif, Georgia, serif;
  --font-wordmark-settings: 'opsz' 144;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 250, 248, 0.85);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  /* Horizontal padding lives on .site-nav (matches .section / .hero) so
     .site-nav-inner's content aligns flush with every other inner. */
  padding: 0;
}

.site-nav-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Inset to match the box content edge (mkt-frame gutter + panel padding) so
     the logo left-aligns with the hero text. */
  padding: 14px calc(var(--gutter) + var(--panel-pad));
  display: flex;
  align-items: center;
  gap: 24px;
}

/* IMPREST wordmark — Fraunces heavy + display opsz, copper dot accent. */
.site-nav-brand {
  font-family: var(--font-wordmark);
  font-variation-settings: var(--font-wordmark-settings);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--imprest);
  flex-shrink: 0;
  line-height: 1;
}
.site-nav-brand:hover { text-decoration: none; }
.site-nav-brand .dot { color: var(--accent); }

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}
.site-nav-links a {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
}
.site-nav-links a:hover {
  background: var(--highlight);
  color: var(--imprest);
  text-decoration: none;
}
.site-nav-links a.active {
  color: var(--imprest);
  background: var(--highlight);
}

/* Product dropdown (client island) — trigger matches the plain nav links;
   the menu drops below on hover/focus-within. */
.site-nav-dropdown { position: relative; display: flex; }
.site-nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}
.site-nav-dropdown:hover .site-nav-dropdown-trigger,
.site-nav-dropdown:focus-within .site-nav-dropdown-trigger {
  background: var(--highlight);
  color: var(--imprest);
  text-decoration: none;
}
.site-nav-dropdown-chevron { transition: transform 0.18s ease; }
.site-nav-dropdown:hover .site-nav-dropdown-chevron,
.site-nav-dropdown:focus-within .site-nav-dropdown-chevron { transform: rotate(180deg); }
.site-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 60;
}
/* Transparent bridge so the pointer can cross the gap without closing. */
.site-nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.site-nav-dropdown-menu[hidden] { display: none; }
.site-nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
/* Category icon: muted so the label leads, picking up the brand color on
   hover along with the rest of the row. Fixed-size so labels stay aligned. */
.site-nav-dropdown-icon {
  flex: 0 0 16px;
  color: var(--dim);
  transition: color 0.15s ease;
}
.site-nav-dropdown-menu a:hover {
  background: var(--highlight);
  color: var(--imprest);
  text-decoration: none;
}
.site-nav-dropdown-menu a:hover .site-nav-dropdown-icon {
  color: var(--accent);
}

.site-nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Dark variant (docs / developer surface) ----
   The pages under app/(docs) keep a dark treatment, so the nav sits on
   #0a0a0a there. It stays the SAME component with the same links, order, and
   geometry — only the palette moves.

   Every rule above resolves color through a token, so re-pointing the tokens
   on the nav element is the whole change: the brand, links, hover states,
   dropdown panel, and the ghost/primary buttons all follow automatically.
   Restyling the child selectors individually would fork the two navs and let
   them drift, which is exactly what this variant exists to prevent.

   Copper (--accent) is deliberately NOT overridden: it carries enough contrast
   on the dark shell, and keeping it makes the dropdown icon hover and the Sign
   up button read as the same brand on both surfaces.

   Every value below resolves to a PRODUCT token from globals.css, read in dark
   mode (the docs layout carries `.dark`). No new colors: the docs chrome is
   the app's dark shell, so it must move when the app's palette moves.
   --color-sidebar is the app's own choice for both the sidebar and the top
   nav, which is exactly what this is. */
.site-nav--dark {
  --imprest: var(--color-base-content);    /* brand wordmark + hover/active text */
  --muted: var(--color-sidebar-text);      /* resting link color */
  --ink: var(--color-base-content);        /* dropdown item label */
  --dim: var(--color-text-muted);          /* dropdown item icon, resting */
  --highlight: var(--color-hover);         /* link + button hover bed */
  --surface: var(--color-base-100);        /* dropdown panel */
  --rule: var(--color-border);             /* dropdown panel border */
  --rule-strong: var(--color-border);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

  background: var(--color-sidebar);
  border-bottom: 1px solid var(--color-border);
}

/* ========== Buttons — copper primary, dark-teal secondary ========== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.05s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(0.5px); }

.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--imprest);
  border-color: var(--rule-strong);
}
.btn-secondary:hover { background: var(--highlight); border-color: var(--imprest); }

.btn-ghost {
  background: transparent;
  color: var(--muted);
}
.btn-ghost:hover { color: var(--imprest); background: var(--highlight); }

.btn-large {
  padding: 14px 24px;
  font-size: 15px;
  border-radius: 10px;
}

.site-footer {
  border-top: 1px solid var(--rule);
  padding: var(--space-7) var(--gutter) var(--space-6);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}
.site-footer-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: 32px;
  margin-bottom: var(--space-6);
}
.site-footer h5 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--imprest);
  margin: 0 0 12px;
  font-weight: 700;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--imprest); text-decoration: underline; }

/* Dark variant, paired with .site-nav--dark for the docs surface. Same token
   re-point onto the product's dark palette, same reasoning. See the
   .site-nav--dark comment. */
.site-footer--dark {
  --imprest: var(--color-base-content);
  --muted: var(--color-sidebar-text);
  --rule: var(--color-border);
  --surface: var(--color-sidebar);
}
.site-footer-base {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer-brand {
  display: inline-block;
  color: var(--imprest);
  margin-bottom: 12px;
  line-height: 1;
}