/*
 * Fast Focus — Shared Design System
 *
 * Single source of truth for color tokens, base reset, typography utilities,
 * and the brand tagline lockup. Linked from every public-facing surface
 * (static HTML pages in public/, plus the Next.js App Router via the head
 * configured in app/layout.tsx).
 *
 * Page-specific section layouts (hero variants, pricing grids, etc.) stay
 * inline on each page — only the design system primitives live here so the
 * palette and lockup are updated in one place.
 *
 * Palette values are locked per the V1 stack package brief.
 */

:root {
  --ink: #0E1014;
  --ink-2: #1F232B;
  --paper: #F4EFE6;
  --paper-2: #ECE4D5;
  --signal: #2F5D3A;
  --signal-soft: #7BA88B;
  --teal: #2C5F5F;
  /* --accent-red: small-scale punctuation accent only. Reserved for
     the favicon dot, team brief PDF cover moments, the brand-mark
     period — surfaces where the color reads as a precise note rather
     than as broad emphasis. Do NOT use at hero scale or in primary
     content body; emphasis at those sizes goes through --signal. */
  --accent-red: #C8341B;
  --muted: #6B6258;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter Tight', sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.serif { font-family: 'Fraunces', serif; }
.mono  { font-family: 'JetBrains Mono', monospace; }

/* ====== BRAND LOCKUP ======
 *
 * The locked tagline pair. Descriptor + supporting line, used as a brand
 * identity element wherever space permits.
 *
 * Phrasing (canonical, never paraphrased):
 *   - Descriptor: "Market intelligence for plaintiff-side litigation teams."
 *     (trailing period included, sentence case)
 *   - Supporting line: three "Real" phrases in fixed order
 *     (Real People → Real Feedback → Real Fast). No other content,
 *     no trailing period, never reordered.
 *
 * Typographic treatment varies by surface, but is consistent within
 * each surface:
 *
 *   - Body copy / prose contexts (e.g., email body, marketing
 *     paragraphs, FAQ answers): title case on each "Real" phrase with
 *     periods between phrases —
 *       "Real People. Real Feedback. Real Fast"
 *
 *   - UI labels and brand-identity surfaces (e.g., this .brand-lockup
 *     component on the homepage hero, the OG image, internal docs,
 *     dashboard headers): uppercase with middle dots between phrases —
 *       "REAL PEOPLE · REAL FEEDBACK · REAL FAST"
 *     The CSS below applies text-transform: uppercase automatically;
 *     the source markup uses middle dots so the punctuation reads
 *     correctly in both styled and plain-text contexts.
 *
 * Always use both lines together where space permits. Descriptor alone
 * is acceptable in tight spaces (meta tags, email signatures).
 */

.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 36px;
}
.brand-lockup-descriptor {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 640px;
}
.brand-lockup-supporting {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 700;
}