/* brand.css — the ONE shared brand layer for every customer page.
   Loaded LAST in <head> (after each page's inline <style>) so these canonical
   values win over page-local drift. Before this file existed, every page
   hand-copied its token block and they drifted: secondary text was #5C7080 on
   home, #5A6670 on orders, #4A5F6B on cart; the five tool pages loaded DM Sans
   but never put it in --sans; keyboard focus styling existed on 2 of ~25 pages.
   Scope discipline: only true brand constants live here — page-specific
   styles stay inline in their pages. */

:root {
  /* Canonical palette (matches the PWA app.css + index.html) */
  --ink: #0B2A3B;
  --ink-soft: #5C7080;
  --ink-faint: #8FA4B5;
  --bone: #EEE8DB;
  --seafoam: #8FB5A7;
  --gold: #D4A04C;
  --rose: #C97862;

  /* Canonical type stack. DM Sans FIRST in --sans — several pages loaded the
     font but never used it because their local --sans began with -apple-system. */
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Branded keyboard focus — site-wide (was on 2 pages). :focus-visible keeps
   it off mouse/touch; the outline follows each element's own border-radius. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--seafoam);
  outline-offset: 2px;
}

/* Wordmark law (founder, 2026-06-18): the lowercase "goodtides" wordmark is
   DM Sans medium so its g matches the brand tile's g — editorial type stays
   Lora. The tile drops 3.7px to share a baseline with the wordmark g. */
.nav-brand-text,
.footer-brand-text,
.brand-link,
.dash-brand-text,
.login-hero-mark-text {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
}
.nav-brand > svg { transform: translateY(3.7px); }
