/* ============================================================================
   SortedResearch brand palette — THE single source of truth for colour.
   Every brand hex is written here exactly once. Two kinds of consumer read it:

   1. The app (src/app/globals.css) `@import`s this file, then its Tailwind
      `@theme` block aliases these raw values into the semantic tokens
      (--color-brand, --color-ink, …) that generate the bg-brand / text-ink
      utilities. Runtime theme overrides live in globals.css ([data-theme=…]).

   2. The static marketing pages (public/*.html) `<link>` this file directly
      and reference the short aliases (--teal, --orange, …) in the marketing
      names section below.

   JS-only surfaces (transactional emails, canvas/Office exports, and the
   categorical chart palettes) cannot read CSS variables — their matching
   single source is src/lib/brand.ts. Keep the two in sync.

   Derived from the official lion logo: teal "sorted" + orange "research" +
   deep plum lion. Do not add new hard-coded hexes elsewhere — add them here.
   ============================================================================ */

:root {
  /* --- Canonical raw palette (each hex appears once, only here) --- */
  --brand-teal: #0d5766;        /* primary brand */
  --brand-teal-dark: #0a4651;   /* primary hover / darker teal */
  --brand-teal-tint: #e7f0f2;   /* tint surface */
  --brand-orange: #f08f41;      /* CTA / accent */
  --brand-orange-dark: #dd7a2e; /* CTA hover */
  --brand-plum: #2a1838;        /* headings / dark sections (wordmark purple) */
  --brand-plum-700: #4a2d5f;    /* mid plum */
  --brand-plum-alt: #3c2146;    /* reconciled plum for the v2 console */
  --brand-gold: #d89a4e;        /* decorative only */
  --brand-ink: #241726;         /* primary text */
  --brand-body: #2e2633;        /* body text */
  --brand-muted: #6b6470;       /* muted text */
  --brand-border: #e7e2ea;      /* hairlines / borders */
  --brand-surface: #ffffff;     /* cards / surfaces */
  --brand-surface-alt: #f7f1f4; /* alt surface (marketing "mist") */
  --brand-bg: #faf8fb;          /* page background */
  --brand-panel: #f2f6f7;       /* editor purpose-panels */
  --brand-cream: #fdecdf;       /* stateful surface */
  --brand-lavender: #f1ebf6;    /* stateful surface */

  /* --- Marketing-page aliases (public/*.html) — do not add hexes here --- */
  --teal: var(--brand-teal);
  --teal-700: var(--brand-teal-dark);
  --orange: var(--brand-orange);
  --orange-600: var(--brand-orange-dark);
  --plum: var(--brand-plum);
  --plum-700: var(--brand-plum-700);
  --gold: var(--brand-gold);
  --ink: var(--brand-ink);
  --body: var(--brand-body);
  --muted: var(--brand-muted);
  --border: var(--brand-border);
  --surface: var(--brand-surface);
  --mist: var(--brand-surface-alt);
  --bg: var(--brand-bg);
}