/*
 * OpticonIQ — 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 {
  /* ====== 2026-05 PALETTE + TYPE REFRESH ======
   *
   * Per the homepage revision brief (phase 1.5 — scope expanded from
   * homepage-only to site-wide). Tan #F4EFE6 dropped throughout; the
   * accent green #2F5D3A is preserved and now flows through both
   * the new --accent / --link tokens and the legacy --signal alias.
   *
   * Prefer the new token names in any new markup. Legacy token names
   * (--paper, --paper-2, --ink, --ink-2, --signal, --signal-soft,
   * --muted) are re-mapped to the new palette so existing CSS keeps
   * rendering correctly — every page that referenced --paper now
   * gets the off-white #FAFAF8 automatically.
   *
   * The type stack: Newsreader (serif, with true italic 400-600
   * variants loaded via the Google Fonts <link> in app/layout.tsx
   * and each static HTML head) + Inter (sans). Italic is reserved
   * for scenario quotes and study titles per the brief's italic-
   * usage rules.
   */

  /* New palette */
  --bg:             #FAFAF8;
  --text:           #1A1A1A;
  --text-secondary: #5C5C5C;
  --divider:        #E8E6E1;
  --accent:         #2F5D3A;
  --link:           #2F5D3A;

  /* Type stack */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Legacy aliases — point at the new palette so existing CSS rules
     across every page continue to work. */
  --ink:         var(--text);
  --ink-2:       var(--text-secondary);
  --paper:       var(--bg);
  --paper-2:     #FFFFFF;
  --signal:      var(--accent);
  --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 --accent. */
  --accent-red: #C8341B;
  --muted:      #8E8A82;
}

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

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Headers → Newsreader serif site-wide. Italic-usage rules from the
   homepage revision brief (italics only on scenario quotes and study
   titles, never on headings) are enforced in markup; CSS just hands
   the family. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
}

/* True italic — pulls Newsreader's designed italic variant via the
   loaded italic weights (400-600 in the Google Fonts import string).
   Used for scenario quotes (<em>"..."</em>) and study titles
   (<em>Charleston Premises Liability Reference Study</em>). */
em {
  font-family: var(--font-serif);
  font-style: italic;
}

/* Tabular-number utility for stat-heavy callouts. */
.tabular-nums { font-variant-numeric: tabular-nums; }

.serif { font-family: var(--font-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: var(--font-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;
}