/* ============================================================
   shared-tokens.css — single source of truth for v3 brand
   design tokens (colors), Google Fonts import, and the global
   :focus-visible accessibility rule.

   Linked from every public-facing HTML page. Local :root blocks
   in individual pages (legacy) define the same values and are
   left in place for the moment; they'll be removed in a follow-
   up cleanup pass.

   Spec source: final-design-handoffv3/design-tokens.md
   Chunk:       Chunk 1 (token foundation) — v3 implementation
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

:root {
  /* === Brand canon (locked 6) ============================== */
  --brand-navy: #0f2c4c;       /* primary text, headings, logo dot */
  --brand-orange: #e09a1b;     /* sole brand accent (= "amber") */
  --brand-charcoal: #3d3528;   /* primary web CTA bg, muted text, off-black */
  --warm-light: #faf3e7;       /* default cream page bg */
  --warm-mid: #e0cba7;         /* dividers, tonal shifts */
  --brand-white: #ffffff;      /* email card surface only (not web cards) */

  /* === Web-only additions (not in email canon) ============== */
  --paper: #fdf8ec;            /* web card surface (warm paper, not pure white) */
  --paper-edge: #e8dcc0;       /* 1px borders on paper cards */
  --cream-soft: #f5ecd9;       /* subtle tonal shift between cream sections */
  --navy-deep: #091a30;        /* footer / deepest dark surface */
  --navy-soft: #1a3a5c;        /* eyebrow text on light surfaces */
  --text-soft: #3d4a5c;        /* body copy that's not headline weight */
  --text-mute: #7a6b54;        /* tertiary text, metadata, field hints */

  /* === Error state (added in Chunk 2 for login modal error card) === */
  --brand-error: #b3261e;      /* deep accessible red, distinct from amber */
  --brand-error-bg: #f9e8e6;   /* warm-tinted paper bg for error surfaces */
}

/* === Global accessibility: focus-visible outline ============
   Per design-tokens.md §Accessibility and cross-screen-checklist
   §Accessibility — every interactive element gets the amber ring.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
  border-radius: 4px;
}