:root {
  /* ─── Brand / ink ─────────────────────────────────────────── */
  --bg-primary: #181d26;          /* near-black — primary CTA, display ink, dark surfaces */
  --bg-primary-active: #0d1218;   /* primary button press state */

  /* ─── Text ────────────────────────────────────────────────── */
  --ink: #181d26;                 /* strongest text — display headings */
  --body: #333840;                /* default running text */
  --muted: #41454d;               /* captions, breadcrumbs, footer links */
  --border-strong: #9297a0;       /* outline on disabled secondary buttons */
  --on-primary: #ffffff;          /* text on dark / primary surfaces */

  /* ─── Surfaces ────────────────────────────────────────────── */
  --canvas: #ffffff;              /* default page surface */
  --surface-soft: #f8fafc;        /* tabbed cards, featured pricing tier, grid header */
  --surface-strong: #e0e2e6;      /* light-gray CTA banner */
  --surface-dark: #181d26;        /* dark navy CTA cards */
  --surface-dark-elevated: #1d1f25;
  --hairline: #dddddd;            /* 1px borders, dividers, grid lines */

  /* ─── Signature card surfaces (brand voltage) ─────────────── */
  --signature-coral: #aa2d00;
  --signature-forest: #0a2e0e;
  --signature-cream: #f5e9d4;
  --signature-peach: #fcab79;
  --signature-mint: #a8d8c4;
  --signature-yellow: #f4d35e;
  --signature-mustard: #d9a441;

  /* ─── Semantic ────────────────────────────────────────────── */
  --link: #1b61c9;
  --link-active: #1a3866;
  --info: #254fad;
  --info-border: #458fff;
  --success: #006400;
  --success-border: #39bf45;
  --danger: #aa2d00;              /* reuse oxide-red for destructive */
  --warning: #d9a441;

  /* ─── CMS field / tag colors (app sub-system) ─────────────── */
  /* Soft tag fills for select-cell chips in the grid — derived from the
     signature pastels at low saturation so the grid reads calm, not loud. */
  --tag-coral-bg: #fbe4dc;   --tag-coral-fg: #8f2600;
  --tag-peach-bg: #ffe9d6;   --tag-peach-fg: #9a4e16;
  --tag-yellow-bg: #fcf2ce;  --tag-yellow-fg: #7a5e10;
  --tag-mint-bg: #dcefe7;    --tag-mint-fg: #15543f;
  --tag-forest-bg: #d9e7da;  --tag-forest-fg: #0a2e0e;
  --tag-blue-bg: #dde9fb;    --tag-blue-fg: #1a3866;
  --tag-gray-bg: #eceef1;    --tag-gray-fg: #41454d;

  /* ─── Status (publish workflow) ───────────────────────────── */
  --status-published: #006400;
  --status-published-bg: #e3f1e3;
  --status-draft: #41454d;
  --status-draft-bg: #eceef1;
  --status-scheduled: #254fad;
  --status-scheduled-bg: #dde9fb;
  --status-review: #9a4e16;
  --status-review-bg: #ffe9d6;

  /* ─── Semantic aliases (use these in components) ──────────── */
  --text-strong: var(--ink);
  --text-body: var(--body);
  --text-muted: var(--muted);
  --surface-canvas: var(--canvas);
  --surface-card: var(--canvas);
  --surface-rail: var(--surface-soft);
  --border-hairline: var(--hairline);
  --accent-primary: var(--bg-primary);
  --focus-ring: var(--info-border);
}