/*
 * NeoAI public website: design tokens.
 *
 * Canonical palette = the approved customer materials. docs/customer-materials/neoai-flyer.html
 * and NeoAI-Customer-Presentation.pptx use exactly these values; the signed-in product UI's
 * #0e7a82 accent is an in-product colour and deliberately not used here.
 *
 * Contrast rules (WCAG 2.2 AA, measured):
 *   --amber is for dark backgrounds only: 7.09:1 on --ink, but 2.41:1 on white / 2.21:1 on
 *   --paper, so it never carries text on a light surface.
 *   --slate-soft is 4.30:1 on --paper, which fails for body-size text. Secondary text uses
 *   --text-muted (5.13:1 on --paper); --slate-soft is kept for borders on form controls
 *   (4.70:1 on white, above the 3:1 non-text minimum).
 */
:root {
  /* Brand palette (canonical, from the flyer/deck) */
  --ink: #0b1f1d;
  --teal: #0f6e6a;
  --teal-deep: #0a4a47;
  --teal-pale: #e4f0ef;
  --amber: #e0982f;
  --paper: #f6f5ef;
  --card: #ffffff;
  --slate: #3a4544;
  --slate-soft: #6b7674;
  --mist: #dbe3e1;

  /* Derived, accessibility-driven */
  --text: var(--slate);
  --text-strong: var(--ink);
  --text-muted: #5f6a68;
  --text-on-dark: #d8ede9;
  --text-on-dark-soft: #9fc4bf;
  --heading-on-dark: #ffffff;
  --control-border: var(--slate-soft);
  --error: #a4262c;
  --error-bg: #fbeaea;
  --focus-light: var(--teal-deep);
  --focus-dark: var(--amber);

  /* Capability tier tags (flyer .tag values) */
  --tag-available-bg: #dcefdf;
  --tag-available-fg: #1f6b3a;
  --tag-preview-bg: #fbe8cf;
  --tag-preview-fg: #96590a;
  --tag-roadmap-bg: #e6e6ee;
  --tag-roadmap-fg: #4a4a63;

  /* Typography: system stack only, no web-font requests */
  --font: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 800;
  --lh-tight: 1.1;
  --lh-body: 1.6;
  --tracking-eyebrow: 0.16em;

  /* Spacing: 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2.5rem;
  --s-7: 4rem;
  --s-8: 6rem;

  /* Layout */
  --container: 70rem; /* 1120px */
  --gutter: 1rem;
  --radius: 6px;
  --radius-lg: 10px;
  --target: 44px;
  --shadow: 0 1px 2px rgba(11, 31, 29, 0.06), 0 8px 24px rgba(11, 31, 29, 0.06);
}