/**
 * Design tokens — ported from the approved /website-demo implementation
 * (src/lib/website-demo/tokens.css) and docs/microsite/DESIGN-SYSTEM.md.
 * Same values, same names minus the `wd-` scoping prefix (this is a
 * standalone project with nothing else on the page to scope against).
 *
 * A verified customer brand color (site.brand.primaryColor) may override
 * --color-primary/--color-primary-strong only if it passes the contrast
 * checks in DESIGN-SYSTEM.md §2 — that check is not automated in this
 * pass; see the implementation report.
 */
:root {
  /* Brand */
  --color-primary: #0f7d8c;
  --color-primary-strong: #0a5e6a;
  --color-accent: #ffb84d;

  /* Ink / text */
  --color-ink: #12333a;
  --color-ink-soft: #3e5a60;
  --color-ink-faint: #7c979c;

  /* Surfaces */
  --color-surface: #ffffff;
  --color-surface-alt: #eef5f6;
  --color-surface-dark: #12333a;
  --color-surface-dark-text: #c4d9dc;
  --color-surface-dark-text-muted: #9fbdc1;

  /* Borders */
  --color-border: #d7e4e6;

  /* Chips / badges */
  --color-chip-bg: #e3f0f2;
  --color-chip-text: #0a5e6a;

  /* Development placeholder styling ([PLACEHOLDER: ...] only) */
  --color-placeholder-bg: #fff4e1;
  --color-placeholder-border: #e8c98a;

  /* Focus / error / success */
  --color-focus: #0f7d8c;
  --color-error: #c0392b;
  --color-success: #1b7a4a;

  /* Typography */
  --font-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Figtree", ui-sans-serif, system-ui, sans-serif;

  /* Layout */
  --container-max: 1100px;
  --breakpoint: 1080px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(18, 51, 58, 0.06);
  --shadow-raised: 0 8px 24px rgba(18, 51, 58, 0.12);
}