/* ============================================================
   COLOR TOKENS
   Airtable-style editorial marketing system.
   Black IS the primary — not blue. Link blue is a separate role.
   ============================================================ */

:root {
  /* --- Brand & Accent --- */
  --color-primary: #181d26;          /* near-black ink — primary CTA bg, h1/h2, dark surface */
  --color-primary-active: #0d1218;   /* press state on primary buttons */

  /* --- Surface --- */
  --color-canvas: #ffffff;               /* default page surface */
  --color-surface-soft: #f8fafc;         /* tabbed feature cards, featured pricing tier */
  --color-surface-strong: #e0e2e6;       /* light-gray CTA banner near footer */
  --color-surface-dark: #181d26;         /* dark navy mid-page CTA cards */
  --color-surface-dark-elevated: #1d1f25;/* articles hero base under rainbow stripes */
  --color-hairline: #dddddd;             /* 1px border tone: inputs, dividers, outlines */

  /* --- Text --- */
  --color-ink: #181d26;          /* strongest text — display type, primary btn text-on-light */
  --color-body: #333840;         /* default running-text color */
  --color-muted: #41454d;        /* footer links, breadcrumbs, captions */
  --color-border-strong: #9297a0;/* 1px outline on disabled secondary buttons */
  --color-on-primary: #ffffff;   /* text on primary buttons & dark surfaces */
  --color-on-dark: #ffffff;      /* alias — text on dark signature surfaces */

  /* --- Signature Card Surfaces (the brand voltage) --- */
  --color-signature-coral: #aa2d00;  /* largest homepage signature card */
  --color-signature-forest: #0a2e0e; /* deep-green signature card */
  --color-signature-cream: #f5e9d4;  /* cream callout band */
  --color-signature-peach: #fcab79;  /* demo-grid surface */
  --color-signature-mint: #a8d8c4;   /* demo-grid surface */
  --color-signature-yellow: #f4d35e; /* demo-grid surface */
  --color-signature-mustard: #d9a441;/* demo-grid surface */

  /* --- Semantic --- */
  --color-link: #1b61c9;         /* inline links & anchor text (NOT the primary btn) */
  --color-link-active: #1a3866;  /* link press */
  --color-info: #254fad;         /* inline info badges */
  --color-info-border: #458fff;  /* focused-input outline */
  --color-success: #006400;      /* confirmation states */
  --color-success-border: #39bf45;

  /* --- Pricing sub-system --- */
  --color-pricing-ink: #181d26;  /* pricing button/text ink */

  /* --- Focus ring (blue-tinted, holdover from link color) --- */
  --color-focus-ring: rgba(27, 97, 201, 0.35);
}