:root{
/* brand & accent */
--color-primary:#0066cc;
--color-primary-focus:#0071e3;
--color-primary-on-dark:#2997ff;
/* surfaces */
--color-canvas:#ffffff;
--color-canvas-parchment:#f5f5f7;
--color-surface-pearl:#fafafc;
--color-surface-tile-1:#272729;
--color-surface-tile-2:#2a2a2c;
--color-surface-tile-3:#252527;
--color-surface-black:#000000;
--color-surface-chip-translucent:rgba(210,210,215,0.64);
/* text */
--color-ink:#1d1d1f;
--color-body:#1d1d1f;
--color-body-on-dark:#ffffff;
--color-body-muted:#cccccc;
--color-ink-muted-80:#333333;
--color-ink-muted-48:#7a7a7a;
/* hairlines & borders */
--color-divider-soft:#f0f0f0;
--color-hairline:#e0e0e0;
/* semantic aliases */
--surface-page:var(--color-canvas);
--surface-card:var(--color-canvas);
--text-body:var(--color-body);
--text-on-dark:var(--color-body-on-dark);
--link:var(--color-primary);
--link-on-dark:var(--color-primary-on-dark);
--focus-ring:var(--color-primary-focus);
}