[data-cc-type] {
    --card-brand-bg:
        radial-gradient(ellipse at 88% 8%, color-mix(in srgb, var(--accent) 36%, transparent) 0%, transparent 50%),
        linear-gradient(148deg, color-mix(in srgb, var(--dark-fixed) 90%, var(--accent)) 0%, color-mix(in srgb, var(--dark-fixed) 60%, var(--accent)) 100%);
    --card-brand-border: color-mix(in srgb, var(--accent) 28%, transparent);
    --card-brand-glow: color-mix(in srgb, var(--accent) 22%, var(--shadow-strong));
}

html[data-color-mode="dark"] [data-cc-type] {
    --card-brand-glow: color-mix(in srgb, var(--accent) 28%, var(--shadow-stronger));
}

[data-cc-type="Visa"] {
    --card-brand-bg:
        radial-gradient(ellipse at 88% 8%, rgba(100, 150, 255, 0.38) 0%, transparent 50%),
        linear-gradient(148deg, #0b1d5e 0%, #1535a8 58%, #1c44c8 100%);
    --card-brand-border: rgba(80, 120, 255, 0.22);
    --card-brand-glow: rgba(10, 30, 100, 0.42);
}

[data-cc-type="MasterCard"] {
    --card-brand-bg:
        radial-gradient(ellipse at 88% 8%, rgba(255, 160, 50, 0.32) 0%, transparent 50%),
        linear-gradient(148deg, #3a0000 0%, #8b0000 50%, #b82020 100%);
    --card-brand-border: rgba(210, 80, 50, 0.26);
    --card-brand-glow: rgba(80, 0, 0, 0.40);
}

[data-cc-type="Amex"] {
    --card-brand-bg:
        radial-gradient(ellipse at 88% 8%, rgba(80, 160, 255, 0.32) 0%, transparent 50%),
        linear-gradient(148deg, #001a40 0%, #013a82 52%, #016fd0 100%);
    --card-brand-border: rgba(1, 111, 208, 0.30);
    --card-brand-glow: rgba(0, 20, 70, 0.44);
}

[data-cc-type="Discover"] {
    --card-brand-bg:
        radial-gradient(ellipse at 88% 8%, rgba(255, 190, 60, 0.34) 0%, transparent 50%),
        linear-gradient(148deg, #2e1000 0%, #7a2e00 52%, #a84000 100%);
    --card-brand-border: rgba(200, 110, 0, 0.28);
    --card-brand-glow: rgba(60, 20, 0, 0.42);
}