/* Parker Health — colour tokens · Catppuccin
   Two flavours, one system. Latte (light) is the primary house style for
   documents, decks and the master reviews. Frappé (dark) is for social and
   carousel covers — add class="frappe" to any subtree to flip it dark.
   The accent names are identical across both flavours, so the evidence-tier
   mapping never changes, only the flavour does. Mauve is the primary accent.

   Semantic tokens (flavour-agnostic) flip under .frappe; every legacy brand
   name (--bone, --forest, --copper, --sage …) is kept as a re-pointed alias
   so existing components re-skin for free. */

:root {
  /* ── Catppuccin Latte — raw ramp (light flavour) ───────────── */
  --ctp-base: #eff1f5;   --ctp-mantle: #e6e9ef; --ctp-crust: #dce0e8;
  --ctp-text: #4c4f69;   --ctp-sub: #6c6f85;    --ctp-surface: #ccd0da; --ctp-overlay: #9ca0b0;
  --ctp-mauve: #8839ef;  --ctp-green: #40a02b;  --ctp-sapphire: #209fb5; --ctp-teal: #179299;
  --ctp-yellow: #df8e1d; --ctp-peach: #fe640b;  --ctp-blue: #1e66f5;    --ctp-red: #d20f39;

  /* ── Catppuccin Frappé — raw ramp (dark flavour) ───────────── */
  --frappe-base: #303446;   --frappe-mantle: #292c3c; --frappe-crust: #232634;
  --frappe-text: #c6d0f5;   --frappe-sub: #a5adce;    --frappe-surface: #414559; --frappe-overlay: #838ba7;
  --frappe-mauve: #ca9ee6;  --frappe-green: #a6d189;  --frappe-sapphire: #85c1dc; --frappe-teal: #81c8be;
  --frappe-yellow: #e5c890; --frappe-peach: #ef9f76;  --frappe-blue: #8caaee;    --frappe-red: #e78284;

  /* ── Semantic surfaces & text (flip under .frappe) ─────────── */
  --surface-page:   var(--ctp-crust);   /* deep canvas / desk behind content */
  --surface-raised: var(--ctp-base);    /* cards, primary content surface */
  --surface-sunken: var(--ctp-mantle);  /* wells, inputs, insets */
  --surface-inverse: var(--ctp-text);   /* dark neutral chip: tooltip, dark button */
  --border-subtle: var(--ctp-surface);
  --border-strong: var(--ctp-overlay);
  --text-1: var(--ctp-text);            /* headings + body */
  --text-2: var(--ctp-sub);             /* muted / secondary */
  --text-3: var(--ctp-overlay);         /* faint */
  --text-on-accent: var(--ctp-base);    /* text on a mauve fill */

  /* ── Accent (mauve) ────────────────────────────────────────── */
  --accent: var(--ctp-mauve);
  --accent-strong: #7a2fd6;             /* pressed / hover mauve */
  --accent-fg: var(--ctp-mauve);        /* mauve text on tint */
  --accent-tint: color-mix(in srgb, var(--ctp-mauve) 15%, var(--ctp-base));

  /* ── Traffic-light signals (green go · yellow caution · red stop) */
  --signal-go: var(--ctp-green);      --signal-go-tint: color-mix(in srgb, var(--ctp-green) 15%, var(--ctp-base));
  --signal-caution: var(--ctp-yellow);--signal-caution-tint: color-mix(in srgb, var(--ctp-yellow) 22%, var(--ctp-base));
  --signal-stop: var(--ctp-red);      --signal-stop-tint: color-mix(in srgb, var(--ctp-red) 12%, var(--ctp-base));

  /* ── Evidence-tier badge palette ───────────────────────────── */
  --tier-established-bg: color-mix(in srgb, var(--ctp-green) 16%, var(--ctp-base));    --tier-established-fg: #2f7d1f;
  --tier-probable-bg:    color-mix(in srgb, var(--ctp-sapphire) 18%, var(--ctp-base)); --tier-probable-fg:    #157d90;
  --tier-emerging-bg:    color-mix(in srgb, var(--ctp-yellow) 26%, var(--ctp-base));   --tier-emerging-fg:    #9a6410;
  --tier-speculative-bg: color-mix(in srgb, var(--ctp-peach) 20%, var(--ctp-base));    --tier-speculative-fg: #c24f08;
  --tier-contested-bg:   color-mix(in srgb, var(--ctp-mauve) 16%, var(--ctp-base));    --tier-contested-fg:   var(--ctp-mauve);
  --tier-opinion-fg:     var(--ctp-blue);  --tier-opinion-border: var(--ctp-blue);  /* outlined, never filled */

  /* ── Utility tints ─────────────────────────────────────────── */
  --teal-tint:    color-mix(in srgb, var(--ctp-teal) 15%, var(--ctp-base));   /* diagram fills, neutral highlight */
  --neutral-tint: color-mix(in srgb, var(--ctp-text) 6%, var(--ctp-base));

  /* ── Legacy brand aliases → new roles (so components re-skin) ─ */
  --bone: var(--surface-raised);          --bone-raised: var(--surface-raised);  --bone-deep: var(--surface-sunken);
  --forest: var(--text-1);                --forest-80: #5b5f7a;                  --forest-tint: var(--neutral-tint);
  --muted: var(--text-2);                 --hairline: var(--border-subtle);
  --copper: var(--accent);                --copper-deep: var(--accent-strong);   --copper-tint: var(--accent-tint);
  --sage: var(--ctp-teal);                --sage-tint: var(--teal-tint);
  --terracotta: var(--ctp-red);           --terracotta-deep: #b00d30;            --terra-tint: var(--signal-stop-tint);

  --bg-page: var(--surface-raised);       --bg-dark: var(--frappe-base);
  --surface-card: var(--surface-raised);  --surface-well: var(--surface-sunken);
  --text-strong: var(--text-1);           --text-body: var(--text-1);            --text-muted: var(--text-2);
  --text-on-dark: var(--frappe-text);
  --border-hairline: var(--border-subtle);
  --link: var(--accent);
}

/* ── Frappé flavour: wrap any subtree in class="frappe" ───────── */
.frappe {
  --surface-page:   var(--frappe-crust);
  --surface-raised: var(--frappe-base);
  --surface-sunken: var(--frappe-mantle);
  --surface-inverse: var(--frappe-text);
  --border-subtle: var(--frappe-surface);
  --border-strong: var(--frappe-overlay);
  --text-1: var(--frappe-text);
  --text-2: var(--frappe-sub);
  --text-3: var(--frappe-overlay);
  --text-on-accent: var(--frappe-base);

  --accent: var(--frappe-mauve);
  --accent-strong: #b48ad0;
  --accent-fg: var(--frappe-mauve);
  --accent-tint: color-mix(in srgb, var(--frappe-mauve) 22%, var(--frappe-base));

  --signal-go: var(--frappe-green);      --signal-go-tint: color-mix(in srgb, var(--frappe-green) 22%, var(--frappe-base));
  --signal-caution: var(--frappe-yellow);--signal-caution-tint: color-mix(in srgb, var(--frappe-yellow) 24%, var(--frappe-base));
  --signal-stop: var(--frappe-red);      --signal-stop-tint: color-mix(in srgb, var(--frappe-red) 22%, var(--frappe-base));

  --tier-established-bg: color-mix(in srgb, var(--frappe-green) 22%, var(--frappe-base));    --tier-established-fg: var(--frappe-green);
  --tier-probable-bg:    color-mix(in srgb, var(--frappe-sapphire) 24%, var(--frappe-base)); --tier-probable-fg:    var(--frappe-sapphire);
  --tier-emerging-bg:    color-mix(in srgb, var(--frappe-yellow) 26%, var(--frappe-base));   --tier-emerging-fg:    var(--frappe-yellow);
  --tier-speculative-bg: color-mix(in srgb, var(--frappe-peach) 26%, var(--frappe-base));    --tier-speculative-fg: var(--frappe-peach);
  --tier-contested-bg:   color-mix(in srgb, var(--frappe-mauve) 26%, var(--frappe-base));    --tier-contested-fg:   var(--frappe-mauve);
  --tier-opinion-fg:     var(--frappe-blue);  --tier-opinion-border: var(--frappe-blue);

  --teal-tint:    color-mix(in srgb, var(--frappe-teal) 22%, var(--frappe-base));
  --neutral-tint: color-mix(in srgb, var(--frappe-text) 10%, var(--frappe-base));

  /* legacy aliases that pointed at raw Latte values need re-pointing here */
  --forest-80: #9098b8;
  --sage: var(--frappe-teal);
  --terracotta: var(--frappe-red);   --terracotta-deep: #d95c5e;
  color: var(--text-1);
}