@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* Accents stay saturated so text, icons, and rings stay readable */
        --color-primary: 110 58 255;
        --color-secondary: 232 145 176;

        /* main_frontend baby-pink theme */
        --color-brand: 255 226 238;
        --color-brand-deep: 255 194 214;
        --color-brand-ink: 43 26 56;
        --color-brand-soft: 255 245 248;
        --color-ink: 17 17 17;
        --color-muted: 95 90 102;
        --color-line: 229 231 235;
        --color-soft: 249 250 251;

        --color-bg-primary: 255 255 255;
        --color-bg-shell: 255 255 255;
        --color-bg-rail: 108 30 106;
        --color-bg-panel: 244 245 247;
        --color-bg-subnav: 249 243 248;
        --color-border-primary: 229 231 235;
        --color-text-primary: 17 17 17;
        --color-text-secondary: 95 90 102;
        --color-gradient-btn-text: 43 26 56;
    }
}

.chrome-mix {
    background-color: rgb(var(--color-bg-rail));
}

.chrome-mix-header {
    background-image: linear-gradient(90deg, #4E1878 0%, #8B245C 100%);
}

.chrome-mix-rail {
    background-image: linear-gradient(180deg, #4E1878 0%, #8B245C 100%);
}

/* Baby pink fills for existing from-primary → to-secondary buttons */
.from-primary,
.hover\:from-primary:hover,
.disabled\:from-primary:disabled {
    --tw-gradient-from: #ffe2ee var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 226 238 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary\/90,
.hover\:from-primary\/90:hover,
.disabled\:from-primary\/90:disabled {
    --tw-gradient-from: rgb(255 226 238 / 0.9) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 226 238 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary\/80,
.hover\:from-primary\/80:hover,
.group:hover .group-hover\:from-primary\/80 {
    --tw-gradient-from: rgb(255 226 238 / 0.8) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 226 238 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary\/60 {
    --tw-gradient-from: rgb(255 226 238 / 0.6) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 226 238 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary\/20,
.hover\:from-primary\/20:hover {
    --tw-gradient-from: rgb(255 226 238 / 0.35) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 226 238 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary\/15 {
    --tw-gradient-from: rgb(255 226 238 / 0.45) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 226 238 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary\/10,
.from-primary\/5,
.hover\:from-primary\/5:hover {
    --tw-gradient-from: rgb(255 226 238 / 0.28) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 226 238 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-secondary,
.hover\:to-secondary:hover,
.disabled\:to-secondary:disabled {
    --tw-gradient-to: #ffc2d6 var(--tw-gradient-to-position) !important;
}

.to-secondary\/90,
.hover\:to-secondary\/90:hover,
.disabled\:to-secondary\/90:disabled {
    --tw-gradient-to: rgb(255 194 214 / 0.9) var(--tw-gradient-to-position) !important;
}

.to-secondary\/80,
.hover\:to-secondary\/80:hover,
.group:hover .group-hover\:to-secondary\/80 {
    --tw-gradient-to: rgb(255 194 214 / 0.8) var(--tw-gradient-to-position) !important;
}

.to-secondary\/60 {
    --tw-gradient-to: rgb(255 194 214 / 0.6) var(--tw-gradient-to-position) !important;
}

.to-secondary\/20,
.hover\:to-secondary\/20:hover {
    --tw-gradient-to: rgb(255 194 214 / 0.35) var(--tw-gradient-to-position) !important;
}

.to-secondary\/15 {
    --tw-gradient-to: rgb(255 194 214 / 0.45) var(--tw-gradient-to-position) !important;
}

.to-secondary\/10,
.to-secondary\/5 {
    --tw-gradient-to: rgb(255 194 214 / 0.28) var(--tw-gradient-to-position) !important;
}

/* Dark ink on filled baby-pink buttons and selected pills */
.from-primary.to-secondary,
.from-primary\/90.to-secondary\/90,
.from-primary\/80.to-secondary\/80,
.from-primary\/60.to-secondary\/60,
.hover\:from-primary:hover,
.hover\:from-primary\/90:hover,
.hover\:from-primary\/80:hover {
    color: #2b1a38;
}

.from-primary.to-secondary.text-white,
.from-primary\/90.to-secondary\/90.text-white,
.from-primary\/80.to-secondary\/80.text-white,
.from-primary\/60.to-secondary\/60.text-white,
.from-primary.to-secondary .text-white,
.from-primary\/90.to-secondary\/90 .text-white,
.from-primary\/80.to-secondary\/80 .text-white,
.group:hover .group-hover\:from-primary\/80 .group-hover\:text-white,
.text-secondary.border-secondary,
.text-secondary.ring-secondary,
label.text-secondary,
button.text-secondary,
.hover\:bg-secondary:hover.hover\:text-white:hover {
    color: #2b1a38 !important;
}