:root {
    --ink:       hsl(286, 60%, 5%);   /* #0e0314 — deepest bg, footer */
    --deep:      hsl(286, 55%, 12%);  /* #1e0a35 — hero, dark sections */
    --dark:      hsl(286, 50%, 24%);  /* #3d1566 — shipping banner */
    --cream:     hsl(286, 30%, 97%);  /* #f8f4fe — page background */
    --offwhite:  hsl(286, 35%, 93%);  /* #ecdff8-ish — about strip */
    --purple:    hsl(286, 80%, 42%);  /* #8014c8 — primary CTA */
    --violet:    hsl(286, 85%, 55%);  /* #a633e8 — hover, accents */
    --lavender:  hsl(286, 70%, 75%);  /* #cc8ef5 — light on dark bg */
    --mist:      hsl(286, 40%, 92%);  /* #ecdff8 — borders, tints */
    --pink:      hsl(308, 75%, 55%);  /* #d93eb8 — complementary pop */
    --muted:     hsl(286, 20%, 45%);  /* #6b5578 — body text on light */
    --border:    hsla(286, 80%, 42%, 0.15);
    --card:      #ffffff;
    --radius:    6px;
}