/* Wassipi brand tokens — v1.0, September 2026.
 *
 * Generated from the Wassipi Brand Guidelines in the CayPoint Claude Design
 * project. The guidelines are the source of truth; this file and tokens.json
 * are the machine-readable copy. See brand/README.md before changing a value.
 *
 * Framework-agnostic on purpose — ADR 0012 has not chosen the frontend yet.
 */

:root {
  /* Core palette. Indigo and cream carry ~80% of any surface; violet is the
   * single brand act on a page. Mint, amber and coral are status only. */
  --wsp-violet: #6B4EFF;
  --wsp-violet-deep: #5B3FE0;
  --wsp-indigo: #1A1436;
  --wsp-cream: #FBF7F0;
  --wsp-white: #FFFFFF;

  --wsp-mint: #37D3A6;
  --wsp-amber: #FFC24B;
  --wsp-amber-deep: #F0AF2E;
  --wsp-coral: #FF6B4A;

  /* Accent text pairs. Mint, amber and coral never carry body text at their
   * pure values — these are the checked substitutes. */
  --wsp-mint-text: #0F7A5C;
  --wsp-mint-text-deep: #0B6249;
  --wsp-amber-text: #8A5A00;
  --wsp-amber-on: #2E2205;
  --wsp-coral-text: #D8431F;
  --wsp-coral-text-deep: #A8340F;

  /* Tints and their borders. */
  --wsp-violet-tint: #F1EDFF;
  --wsp-violet-tint-border: #DCD2FF;
  --wsp-mint-tint: #E4FBF3;
  --wsp-mint-tint-border: #C6F0E2;
  --wsp-amber-tint: #FFF3DC;
  --wsp-amber-tint-border: #F6E2BB;
  --wsp-coral-tint: #FFF3EF;
  --wsp-coral-tint-border: #F6C9BC;

  /* Text on light grounds. */
  --wsp-text: #1A1436;
  --wsp-text-secondary: #453C63;
  --wsp-text-muted: #6A5F87;

  /* Text on indigo. */
  --wsp-text-on-indigo: #FFFFFF;
  --wsp-text-on-indigo-secondary: #C6BCE4;
  --wsp-text-on-indigo-muted: #A79AD4;
  --wsp-text-on-indigo-bright: #E5DEF7;

  /* Surfaces and rules. */
  --wsp-surface: #FFFFFF;
  --wsp-surface-sunken: #FBF7F0;
  --wsp-surface-indigo: #241C49;
  --wsp-border: #EBE2D5;
  --wsp-border-soft: #F1EBE1;
  --wsp-rule: #EDE4D7;
  --wsp-border-input: #DED6EA;
  --wsp-border-on-indigo: #39306B;
  --wsp-rule-on-indigo: #2E2558;

  /* Type. Sans for anything a human wrote; mono for anything the system
   * asserts as fact — timestamps, IDs, status labels, code. */
  --wsp-font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wsp-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wsp-display-size: clamp(38px, 5.6vw, 68px);
  --wsp-display-tracking: -0.04em;
  --wsp-display-leading: 0.96;
  --wsp-heading-size: clamp(26px, 3.4vw, 40px);
  --wsp-heading-tracking: -0.035em;
  --wsp-heading-leading: 1.04;
  --wsp-body-size: 17px;
  --wsp-body-leading: 1.65;
  --wsp-label-size: 11.5px;
  --wsp-label-tracking: 0.12em;
  --wsp-data-size: 13px;
  --wsp-data-leading: 1.85;

  /* Radii. Three steps, and nothing in the system has a square corner. */
  --wsp-radius-pill: 999px;
  --wsp-radius-card: 18px;
  --wsp-radius-inline: 10px;
  --wsp-radius-input: 12px;

  /* Motion. Everything enters from the left and settles right, along the
   * mark's own travel. Nothing enters from below. */
  --wsp-ease-arrival: cubic-bezier(0.22, 1, 0.36, 1);
  --wsp-duration-ui: 180ms;
  --wsp-duration-arrival: 600ms;
  --wsp-duration-logo: 1600ms;

  /* Status. The payload dot is the only status vocabulary — same shape, same
   * size, one colour each. Colour never carries the meaning alone: a status is
   * always dot plus word. These are brand values; which states actually exist
   * is the message lifecycle's decision, not the brand's. See ADR 0014. */
  --wsp-status-queued-dot: #6A5F87;
  --wsp-status-queued-text: #3D2F80;
  --wsp-status-queued-bg: var(--wsp-violet-tint);
  --wsp-status-queued-border: var(--wsp-violet-tint-border);

  --wsp-status-inflight-dot: #8A5A00;
  --wsp-status-inflight-text: #8A5A00;
  --wsp-status-inflight-bg: var(--wsp-amber-tint);
  --wsp-status-inflight-border: var(--wsp-amber-tint-border);

  --wsp-status-retrying-dot: #D8431F;
  --wsp-status-retrying-text: #A8340F;
  --wsp-status-retrying-bg: var(--wsp-coral-tint);
  --wsp-status-retrying-border: var(--wsp-coral-tint-border);

  --wsp-status-delivered-dot: #0F7A5C;
  --wsp-status-delivered-text: #0B6249;
  --wsp-status-delivered-bg: var(--wsp-mint-tint);
  --wsp-status-delivered-border: var(--wsp-mint-tint-border);

  /* Dashboard. Values the dashboard handoff (October 2026) uses that the
   * guidelines did not yet name. Add them to the guidelines too. */
  --wsp-haze: #9C8FC4;
  --wsp-mint-on: #08301F;
  --wsp-error-text: #B33A16;
  --wsp-success-text: #12775C;
  --wsp-border-control: #DCD3C4;
  --wsp-fill-subtle: #F4EEE4;
  --wsp-skeleton: #EDE7DC;
  --wsp-radius-panel: 14px;
  --wsp-shadow-card: 0 18px 50px rgba(26, 20, 54, 0.08);
  --wsp-shadow-menu: 0 18px 40px rgba(26, 20, 54, 0.16);
  --wsp-scrim: rgba(26, 20, 54, 0.35);

  /* Status dots on indigo surfaces use the pure accents. */
  --wsp-status-queued-on-indigo: #A79AD4;
  --wsp-status-inflight-on-indigo: #FFC24B;
  --wsp-status-retrying-on-indigo: #FF6B4A;
  --wsp-status-delivered-on-indigo: #37D3A6;
}