/* Text Colors */

.text {
    color: var(--text) !important;
}

.text-second {
    color: var(--text-second) !important;
}

.text-third {
    color: var(--text-third) !important;
}

.text-lighter {
    color: var(--text-lighter);
}

.text-darker {
    color: var(--text-darker);
}

.text-darkest {
    color: var(--text-darkest);
}

/* Background Colors */

.bg-n {
    background: transparent !important;
}

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

.bg-lightest {
    background-color: var(--background-lightest);
}

.bg-lighter {
    background-color: var(--background-lighter);
}

.bg-darker {
    background-color: var(--background-darker);
}

.bg-darkest {
    background-color: var(--background-darkest);
}

/* Background Secondary Colors */

.bg-secondary {
    background-color: var(--background-secondary) !important;
}

.bg-secondary-lightest {
    background-color: var(--background-secondary-lightest) !important;
}

.bg-secondary-lighter {
    background-color: var(--background-secondary-lighter) !important;
}

.bg-secondary-darker {
    background-color: var(--background-secondary-darker) !important;
}

.bg-secondary-darkest {
    background-color: var(--background-secondary-darkest) !important;
}

/* Primary Colors */

.primary {
    color: var(--primary);
}

.primary-lightest {
    color: var(--primary-lightest);
}

.primary-lighter {
    color: var(--primary-lighter);
}

.primary-darker {
    color: var(--primary-darker);
}

.primary-darkest {
    color: var(--primary-darkest);
}

.bg-primary {
    background-color: var(--primary);
}

.bg-primary-lightest {
    background-color: var(--primary-lightest);
}

.bg-primary-lighter {
    background-color: var(--primary-lighter);
}

.bg-primary-darker {
    background-color: var(--primary-darker);
}

.bg-primary-darkest {
    background-color: var(--primary-darkest);
}

/* Accent Colors */

.accent {
    color: var(--accent);
}

.accent-lightest {
    color: var(--accent-lightest);
}

.accent-lighter {
    color: var(--accent-lighter);
}

.accent-darker {
    color: var(--accent-darker);
}

.accent-darkest {
    color: var(--accent-darkest);
}

.bg-accent {
    background-color: var(--accent);
}

.bg-accent-lightest {
    background-color: var(--accent-lightest);
}

.bg-accent-lighter {
    background-color: var(--accent-lighter);
}

.bg-accent-darker {
    background-color: var(--accent-darker);
}

.bg-accent-darkest {
    background-color: var(--accent-darkest);
}

/* Border Colors */

.border {
    border: 1px solid;
}

.border-0 {
    border: 0;
}

.border-2 {
    border: 2px solid;
}

.border-4 {
    border: 4px solid;
}

.border-8 {
    border: 8px solid;
}

.border-t {
    border-top: 1px solid;
}

.border-r {
    border-right: 1px solid;
}

.border-b {
    border-bottom: 1px solid;
}

.border-l {
    border-left: 1px solid;
}

.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed !important;
}

.border-dotted {
    border-style: dotted;
}

.border-primary {
    border-color: var(--primary) !important;
}

.border-primary-lightest {
    border-color: var(--primary-lightest) !important;
}

.border-primary-lighter {
    border-color: var(--primary-lighter) !important;
}

.border-primary-darker {
    border-color: var(--primary-darker) !important;
}

.border-primary-darkest {
    border-color: var(--primary-darkest) !important;
}

.border-accent {
    border-color: var(--accent) !important;
}

.border-accent-lightest {
    border-color: var(--accent-lightest) !important;
}

.border-accent-lighter {
    border-color: var(--accent-lighter) !important;
}

.border-accent-darker {
    border-color: var(--accent-darker) !important;
}

.border-accent-darkest {
    border-color: var(--accent-darkest) !important;
}

/* Hover States */

.hover\:bg-primary:hover {
    background-color: var(--primary) !important;
}

.hover\:bg-accent:hover {
    background-color: var(--accent) !important;
}

.hover\:bg-primary-darker:hover {
    background-color: var(--primary-darker) !important;
}

.hover\:text-white:hover {
    color: white !important;
}

/* Dark Mode Utilities */

[data-bs-theme="dark"] .dark\:bg {
    background-color: var(--background);
}

[data-bs-theme="dark"] .dark\:bg-secondary {
    background-color: var(--background-secondary);
}

[data-bs-theme="dark"] .dark\:text {
    color: var(--text);
}

/* Add new border utility classes */

.border-subtle {
    border-color: var(--border-subtle) !important;
}

.border-light {
    border-color: var(--border-light) !important;
}

.border-base {
    border-color: var(--border-base) !important;
}

.border-strong {
    border-color: var(--border-strong) !important;
}