CSS Variables Reference

--primary-base
--primary-bg
--primary-dark
--primary-surface
--primary-heading
--primary-subtle
--primary-active
--primary-border
--primary-text
--primary-muted
--primary-hover

--secondary-base
--secondary-bg
--secondary-dark
--secondary-surface
--secondary-heading
--secondary-subtle
--secondary-active
--secondary-border
--secondary-text
--secondary-muted
--secondary-hover

--tertiary-base
--tertiary-bg
--tertiary-dark
--tertiary-surface
--tertiary-heading
--tertiary-subtle
--tertiary-active
--tertiary-border
--tertiary-text
--tertiary-muted
--tertiary-hover

--accent-base
--accent-bg
--accent-dark
--accent-surface
--accent-heading
--accent-subtle
--accent-active
--accent-border
--accent-text
--accent-muted
--accent-hover

--neutral-base
--neutral-bg
--neutral-dark
--neutral-surface
--neutral-heading
--neutral-subtle
--neutral-active
--neutral-border
--neutral-text
--neutral-muted
--neutral-hover

--primary-base-rgb
--secondary-base-rgb
--tertiary-base-rgb
--accent-base-rgb
--neutral-base-rgb

--primary-base-10
--primary-base-20
--primary-base-30
--primary-base-40
--primary-base-50
--primary-base-60
--primary-base-70
--primary-base-80
--primary-base-90

--radius-sm     /* 0.125rem (2px) */
--radius-md     /* 0.25rem (4px) */
--radius-lg     /* 0.5rem (8px) */
--radius-xl     /* 0.75rem (12px) */
--radius-2xl    /* 1rem (16px) */
--radius-3xl    /* 1.5rem (24px) */
--radius-full   /* 9999px */

--hsp-primary-base
--hsp-primary-bg
/* ... all color shades */

--hsp-s1
--hsp-s2
--hsp-s4
/* ... all spacing variables */

.my-element {
  padding: var(--s6);
  background: var(--primary-surface);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-lg);
}

.my-element {
  color: var(--primary-text, #333);
}

.my-element {
  padding: calc(var(--s4) + var(--s2));
  margin: calc(var(--s8) * 2);
}

.my-element {
  background: rgba(var(--primary-base-rgb), 0.5);
}

.my-element {
  background: #6366f1; /* Fallback */
  background: var(--primary-base);
}