/* ==========================================================================
   Avalon product palette
   Mirrors the app's design tokens (sui-* / msi-* scales) so the marketing
   page and the product read as one surface. Change a value here, not in
   styles.css — every component below consumes these.
   ========================================================================== */

:root{
  /* surfaces — --background is pure white; cards are white + border (app default) */
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --band:#F8FAFC;        /* msi-gray-5, alternating section tint */
  --surface-2:#F1F5F9;   /* sui-gray-10 */

  /* text — sui-gray scale, text-primary = gray-80 */
  --ink:#1E293B;         /* sui-gray-80 */
  --ink-2:#475569;       /* sui-gray-60 */
  --ink-3:#94A3B8;       /* sui-gray-40 */
  --line:#E2E8F0;        /* sui-gray-20 */
  --line-2:#F1F5F9;      /* sui-gray-10 */

  /* brand — --primary is sui-teal-60 */
  --teal:#0D9488;        /* sui-teal-60 */
  --teal-hi:#14B8A6;     /* sui-teal-50 */
  --teal-tint:#F0FDFA;   /* sui-teal-5 */
  --teal-line:#99F6E4;   /* sui-teal-20 */
  --teal-node:#5EEAD4;   /* sui-teal-30 = --xy-node-border-default */
  --dots:#99F6E4;

  /* warning — sui-warning scale */
  --amber:#D97706;       /* warning-60 */
  --amber-tint:#FFFBEB;  /* warning-5 */
  --amber-line:#FEF3C7;  /* warning-10 */

  /* code surfaces — sui-gray-80 */
  --code-bg:#1E293B;
  --code-ink:#F1F5F9;
  --code-dim:#94A3B8;

  --btn-on-teal:#FFFFFF;
  --danger:#E11D48;

  /* brand mark — the green roundel carried over from the app nav */
  --mark-bg:#22C55E;
  --mark-ink:#000000;

  /* stream accents */
  --stream-warn:#FBBF24;
  --stream-ok:#5EEAD4;

  --shadow:0 1px 2px rgba(30,41,59,.06);
  --shadow-lg:0 1px 3px rgba(30,41,59,.08), 0 12px 32px -18px rgba(30,41,59,.22);

  --sans-face:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono-face:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --max:1140px;

  color-scheme:light;
}