/* Custom Portfolio Styling Token Extensions */
:root {
    --color-brand: #0098a6;
    --color-brand-hover: #00838f;
}

/* Structural Color & Utility Wrappers */
.text-brand { 
    color: var(--color-brand); 
}

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

.border-brand { 
    border-color: var(--color-brand); 
}

/* Hover and Interaction states */
.hover\:bg-brand-hover:hover { 
    background-color: var(--color-brand-hover); 
}

.focus\:border-brand:focus { 
    border-color: var(--color-brand); 
}

.focus\:ring-brand:focus { 
    --tw-ring-color: var(--color-brand); 
}