/* ==========================================================================
   Generated palette. Every authored colour utility in the markup, expressed
   as a token from tokens.css. No colour value is hard-coded here.
   Regenerate with scratchpad/regen-palette.cjs after markup changes.
   ========================================================================== */

.bg-\[\#285B60\] { background-color: var(--sj-teal); }
.bg-\[\#DFD1B8\] { background-color: var(--sj-sand); }
.bg-\[\#E9F2EF\] { background-color: var(--sj-seafoam); }
.bg-\[\#FFFFFF\] { background-color: var(--sj-white); }
.border-\[\#285B60\] { border-color: var(--sj-teal); }
.border-\[\#E9F2EF\] { border-color: var(--sj-seafoam); }
.focus\:border-\[\#285B60\]:focus { border-color: var(--sj-teal); }
.focus\:ring-\[\#285B60\]:focus { --tw-ring-color: var(--sj-teal); }
.group:hover .group-hover\:text-\[\#285B60\] { color: var(--sj-teal); }
.hover\:bg-\[\#DFD1B8\]:hover { background-color: var(--sj-sand); }
.hover\:bg-\[\#E9F2EF\]:hover { background-color: var(--sj-seafoam); }
.hover\:border-\[\#285B60\]:hover { border-color: var(--sj-teal); }
.hover\:text-\[\#285B60\]:hover { color: var(--sj-teal); }
.hover\:text-\[\#FFFFFF\]:hover { color: var(--sj-white); }
@media (min-width: 48rem) { .md\:border-\[\#E9F2EF\] { border-color: var(--sj-seafoam); } }
.selection\:bg-\[\#E9F2EF\]::selection { background-color: var(--sj-seafoam); }
.selection\:text-\[\#303B3C\]::selection { color: var(--sj-ink); }
.text-\[\#285B60\] { color: var(--sj-teal); }
.text-\[\#303B3C\] { color: var(--sj-ink); }
.text-\[\#DFD1B8\] { color: var(--sj-sand); }
.text-\[\#FFFFFF\] { color: var(--sj-white); }

/* one rounded-corner system */
.rounded-2xl { border-radius: var(--sj-radius); }
.rounded-full { border-radius: var(--sj-radius-pill); }