/* Import our branding color system */
@import url("/assets/branding-606147a9.css");

/*
 * This file serves as a bridge between our branding system and components
 * Components can now use var(--primary-brand), var(--bg-primary), etc.
 * Simply reference any of our defined color variables in your CSS
 */

/* Background Classes */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }
.bg-accent { background-color: var(--bg-accent); }

/* Text Classes */
.text-heading { color: var(--text-heading); }
.text-body { color: var(--text-body); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--text-accent); }
.text-on-accent { color: var(--text-on-accent); }

/* Border Classes */
.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }
.border-accent { border-color: var(--border-accent); }

/* Brand Color Classes */
.bg-brand-primary { background-color: var(--primary-brand); }
.bg-brand-secondary { background-color: var(--secondary-brand); }
.bg-brand-tertiary { background-color: var(--tertiary-brand); }
.text-brand-primary { color: var(--primary-brand); }
.text-brand-secondary { color: var(--secondary-brand); }
.text-brand-tertiary { color: var(--tertiary-brand); }

/* Hover State Classes */
.hover-bg-primary:hover { background-color: var(--hover-bg-primary); }
.hover-bg-secondary:hover { background-color: var(--hover-bg-secondary); }
.hover-border:hover { border-color: var(--hover-border); }
.hover-text:hover { color: var(--hover-text); }
.hover-text-accent:hover { color: var(--text-accent); }
.hover-text-muted:hover { color: var(--text-muted); }