/* Custom design tokens and overrides beyond Tailwind */

:root {
    --color-midnight-900: #040814;
    --color-midnight-850: #060d1f;
    --color-gold-400: #d4a853;
    --color-gold-500: #c49a3f;
    --color-mint-400: #5eead4;
    --color-mint-500: #2dd4bf;
}

/* Ensure Tailwind custom colors are available */
@layer utilities {
    .text-mint-400 { color: var(--color-mint-400); }
    .text-mint-500 { color: var(--color-mint-500); }
    .bg-mint-400 { background-color: var(--color-mint-400); }
    .bg-mint-500 { background-color: var(--color-mint-500); }
    .border-mint-400 { border-color: var(--color-mint-400); }
    .border-mint-400\/20 { border-color: rgba(94, 234, 212, 0.2); }
    .border-mint-400\/40 { border-color: rgba(94, 234, 212, 0.4); }
    .bg-mint-400\/10 { background-color: rgba(94, 234, 212, 0.1); }
    .bg-mint-500\/5 { background-color: rgba(45, 212, 191, 0.05); }
}

/* Smooth image loading */
img {
    image-rendering: auto;
}

/* Selection color */
::selection {
    background: rgba(196, 154, 63, 0.3);
    color: #f0f4f8;
}