/* manifest utilities */

@layer utilities {
.\!text-content-stark { color: var(--color-content-stark) !important }

.text-content-subtle { color: var(--color-content-subtle) }

.bg-page { background-color: var(--color-page) }

.dark\:bg-page {
    &.dark {
        background-color: var(--color-page)
    }
}

.bg-surface-1 { background-color: var(--color-surface-1) }

.dark\:bg-surface-1 {
    &.dark {
        background-color: var(--color-surface-1)
    }
}

.dark\:bg-surface-2 {
    &.dark {
        background-color: var(--color-surface-2)
    }
}

.border-line { border-color: var(--color-line) }

.outline-line { outline-color: var(--color-line) }

.group-hover\:text-brand-content {
    &.group:hover {
        color: var(--color-brand-content)
    }
}

.\!hover\:text-brand-content:hover { color: var(--color-brand-content) !important }
}

@layer utilities {
.\!text-content-stark { color: var(--color-content-stark) !important }

.text-content-subtle { color: var(--color-content-subtle) }

.bg-page { background-color: var(--color-page) }

.dark\:bg-page {
    &.dark {
        background-color: var(--color-page)
    }
}

.bg-surface-1 { background-color: var(--color-surface-1) }

.dark\:bg-surface-1 {
    &.dark {
        background-color: var(--color-surface-1)
    }
}

.dark\:bg-surface-2 {
    &.dark {
        background-color: var(--color-surface-2)
    }
}

.border-line { border-color: var(--color-line) }

.outline-line { outline-color: var(--color-line) }

.text-brand-content { color: var(--color-brand-content) }

.group-hover\:text-brand-content {
    &.group:hover {
        color: var(--color-brand-content)
    }
}

.\!hover\:text-brand-content:hover { color: var(--color-brand-content) !important }
}