/* Soraian AI — the design tokens (ADC-071 D4).
 *
 * The ONE home of the design's palette, type, radii, shadows and motion as CSS custom properties,
 * served at /tokens.css on the www origin and linked by every page before styles.css. The values are
 * the design's own literals (Soraian Current Site, the Claude Design canvas), named here so that
 * the conversation container reads them and so that the chat widget the `chat` project serves
 * (ROADMAP #38) can fit the site by reading the same names — whether it inherits them from this
 * document, links this file by URL, or copies it at build is that project's call.
 *
 * The inline literals elsewhere in index.html are the design's and stay until a fidelity fix
 * touches them (ADC-071 D1); this file is the contract, not a second declaration of those.
 */
:root {
  /* palette — the brand teals */
  --color-brand: #0d7a72;          /* the primary teal: links, pills, icons */
  --color-brand-bright: #0d8a86;   /* the brighter teal: emphasis, hover */
  --color-brand-deep: #0f5f58;     /* the deep teal: display headings */
  --color-brand-tint: #eaf3f2;     /* the pale teal wash: pills, icon wells */
  --color-brand-tint-soft: #eef5f4;/* the panel's icon wells */
  --color-brand-wave: #9ecdc9;     /* the voice stage's wave and pulse rings */
  --gradient-brand: linear-gradient(180deg, #12a29d 0%, #0a8b87 100%); /* the primary button */

  /* palette — ink and surfaces */
  --color-ink: #123f3b;            /* dark teal: the panel's titles */
  --color-ink-strong: #1a1a1a;     /* the body's base ink */
  --color-ink-title: #1f2a28;      /* small bold titles */
  --color-text: #4a5553;           /* body copy */
  --color-muted: #7b8583;          /* hints, captions, status lines */
  --color-surface: #ffffff;
  --color-surface-tint: #fbfdfd;   /* the panel's footer strip */
  --color-line: #e6edec;           /* borders */
  --color-line-soft: #eef4f3;      /* dividers inside the panel */
  --color-line-dashed: #cfdedb;

  /* palette — signals */
  --color-success: #2fae64;        /* "Sora is online" */
  --color-pending: #e0b341;        /* the voice stage's dot while a call connects */
  --color-danger: #b5544a;         /* the error hint, the switch warning */
  --color-danger-tint: #fbeeec;
  --color-danger-strong: #a4392f;

  /* type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Lato', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;

  /* radii */
  --radius-pill: 999px;
  --radius-panel: 18px;            /* the conversation panel, the modal */
  --radius-card: 16px;
  --radius-sm: 12px;

  /* shadows */
  --shadow-panel: 0 24px 50px -38px rgba(20, 50, 48, .45);
  --shadow-modal: 0 40px 80px -40px rgba(18, 42, 40, .6);

  /* motion — the pace of the two ambient animations (the inbox stage, the solution dashboard) as a
     multiple of the design's own timing. Every CSS duration in styles.css is written as the design's
     value divided by it, and script.js reads the same property for its timers, so the pace is one
     number (SEC-013, `Sovereign`: 1.5x — "needs to catch eye quick"; deliberately not phone-only). */
  --motion: 1.5;
}