/* Design tokens.
 *
 * Every value here is a default. A demo overrides what it needs in a :root block
 * inside its own index.html -- usually just the brand ramp and the font pair.
 * Do not edit this file to suit one prospect.
 */

:root {
  /* Brand ramp. --brand-700 must hold >=4.5:1 against white for button text. */
  --brand-50: #eef4fb;
  --brand-100: #d6e5f5;
  --brand-500: #2f6fb5;
  --brand-600: #255a94;
  --brand-700: #1c4571;
  --brand-900: #122b47;

  /* Accent, used sparingly -- one call to action per screen. */
  --accent-500: #c2683a;
  --accent-600: #a4552d;

  /* Neutrals */
  --ink-900: #14181d;
  --ink-700: #333c47;
  --ink-500: #5b6673;
  --ink-300: #97a1ad;
  --ink-100: #dfe4ea;
  --ink-50: #f2f5f8;
  --surface: #ffffff;
  --surface-alt: #f7f9fb;

  /* Panels, cards and form controls sit *on* the page rather than being it. A
   * demo whose ground is tinted needs the raised surfaces to stay lighter, and
   * the only way to say that without forking the sheet is a second token. Same
   * value as --surface by default, so nothing moves until a demo separates them. */
  --surface-raised: #ffffff;
  /* The hero's ground. Two concepts running have now wanted a flat hero instead
   * of the tinted wash, and both reached for a local override of a shared
   * component -- which is the signal to make it a token. */
  --hero-bg: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 100%);

  --ok-600: #1f7a4d;
  --warn-100: #fdf3e0;
  --warn-700: #8a5a10;

  /* Type. Override --font-display / --font-body per prospect. */
  --font-display: "Georgia", "Iowan Old Style", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* A third role, for demos that set figures, scales and micro-labels as data.
   * Defaults to the system mono stack; override with a self-hosted face. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.42rem);
  --step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.85rem);
  --step-3: clamp(1.73rem, 1.53rem + 1vw, 2.4rem);
  --step-4: clamp(2.07rem, 1.75rem + 1.6vw, 3.13rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* The gap between sections. A demo whose sections are already boxed -- plates,
   * ruled panels -- pays this twice and opens a dead band on every scroll, so it
   * needs to be reachable without overriding .section itself. Same value as
   * before, so nothing moves until a demo asks. */
  --section-space: var(--space-9);
  --section-space-tight: var(--space-7);

  /* The fill that marks a cell as carrying a condition or a caveat. Must hold
   * --ink-900 at 4.5:1 -- it is a background for real sentences, not a tint. */
  --caveat-fill: var(--brand-50);

  /* Cards, panels and plates carry a hairline by default. A brand built on
   * keylines -- a mark that is a letter inside a ruled frame -- needs a heavier
   * rule on every raised surface, and overriding .card in one demo means every
   * later demo overrides it too. */
  --rule-card: 1px solid var(--ink-100);

  --radius: 10px;
  --radius-lg: 18px;
  /* Pills and badges were hardcoded round. A brand built on square corners had
   * no way to override them, which left one stubbornly rounded row in an
   * otherwise sharp page. Same default, now reachable. */
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(20 24 29 / 0.06), 0 2px 8px rgb(20 24 29 / 0.06);
  --shadow-2: 0 4px 12px rgb(20 24 29 / 0.08), 0 12px 32px rgb(20 24 29 / 0.08);

  --measure: 68ch;
  --page-max: 1160px;
  --ribbon-height: 44px;
}