/* ============================================================================
 * Profile Sidekick — canonical brand tokens (PRO-300). SINGLE SOURCE OF TRUTH.
 *
 * THE one place the brand palette is declared. The marketing site
 * (website/index.html, privacy.html, terms.html) consumes this file directly via
 *   <link rel="stylesheet" href="/brand/tokens.css">
 * and must NOT re-declare these custom properties in an inline :root. A
 * hand-maintained parallel palette is exactly what drifted before this file
 * existed — --ink-muted read #9b958d on the marketing pages vs #72675f in both
 * apps; the apps were right, so #72675f is canonical here.
 *
 * The two app frontends (src/audit/frontend/index.css and
 * src/dashboard/frontend/index.css) can't link this file at runtime — each
 * compiles a Tailwind v4 `@theme` straight into its own bundle (no render-blocking
 * dependency, no FOUC) — so they MIRROR these exact hexes under the `--color-*`
 * namespace. The mirror is machine-enforced: scripts/check-brand-tokens.js fails
 * the build if any app `@theme` value drifts from a colour token here, or if a
 * marketing page re-declares a token in a :root. To change a colour: edit it HERE,
 * then update both `@theme` blocks to match (the guard makes the two agree).
 * ========================================================================== */
:root {
  /* Surfaces */
  --cream: #fbf7f1;
  --warm-white: #fffcf7;

  /* Ink (text) */
  --ink: #1c1a17;
  --ink-soft: #57524c;
  --ink-muted: #72675f;

  /* Amber (accent) */
  --amber: #e8a030;
  --amber-light: #fef3dc;
  --amber-mid: #f5c060;
  --amber-dark: #a87020;

  /* Signal */
  --rust: #c04e22;
  --sage: #3e7050;
  --sage-light: #e6f0e9;

  /* Type — named here for parity with the apps' `@theme`. The marketing pages use
     literal font-family strings, so these are not cross-checked by the guard. */
  --font-sans: "DM Sans", sans-serif;
  --font-serif: "Lora", serif;

  /* Hairlines + shadows — marketing-surface tokens derived from --ink. Not part of
     the apps' `@theme`, so the guard does not cross-check them; they live here so a
     page's deleted inline :root leaves nothing undefined. */
  --border: rgba(28, 26, 23, 0.10);
  --border-mid: rgba(28, 26, 23, 0.16);
  --border-strong: rgba(28, 26, 23, 0.22);
  --shadow-sm: 0 1px 4px rgba(28, 26, 23, 0.06), 0 4px 16px rgba(28, 26, 23, 0.04);
  --shadow-md: 0 2px 8px rgba(28, 26, 23, 0.08), 0 8px 32px rgba(28, 26, 23, 0.06);
}