/**
 * Landing page accent utilities.
 *
 * `assets/css/tailwind.css` is a vendored, prebuilt Tailwind v4 bundle with no
 * source in this repo, so it only contains the utilities that existed when the
 * template was originally compiled. Colour classes added to the landing markup
 * afterwards resolve to nothing, which left `primary` (violet) as the only
 * accent that actually rendered.
 *
 * This file supplies the missing utilities without regenerating the vendored
 * bundle (which also carries hand-written #topnav / slider styles that have no
 * source to rebuild from). It is additive only.
 *
 * Roles: violet = fills and actions, cyan = informational ink, amber =
 * commercial emphasis, red = problem framing.
 *
 * The `:where(.dark, .dark *)` nesting and `@layer utilities` placement mirror
 * the vendored bundle so specificity and cascade behaviour stay identical.
 */

@layer utilities {
    :root {
        --color-cyan-300: #67e8f9;
        --color-cyan-400: #22d3ee;
        --color-emerald-400: #34d399;
        --color-emerald-900: #064e3b;
        --color-red-400: #f87171;
        --color-red-900: #7f1d1d;
        --color-blue-400: #60a5fa;
        --color-blue-500: #3b82f6;
        --color-violet-400: #a78bfa;
        --color-amber-300: #fcd34d;
        --color-amber-800: #92400e;
        --color-amber-900: #78350f;
    }

    /* Secondary accent — informational ink. 9.88:1 on slate-900. */
    .text-cyan-400 {
        color: var(--color-cyan-400);
    }

    .text-cyan-300 {
        color: var(--color-cyan-300);
    }

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

    .bg-cyan-400\/10 {
        background-color: color-mix(in srgb, var(--color-cyan-400) 10%, transparent);
    }

    .bg-cyan-400\/15 {
        background-color: color-mix(in srgb, var(--color-cyan-400) 15%, transparent);
    }

    .border-cyan-400 {
        border-color: var(--color-cyan-400);
    }

    .border-cyan-400\/20 {
        border-color: color-mix(in srgb, var(--color-cyan-400) 20%, transparent);
    }

    .border-cyan-400\/30 {
        border-color: color-mix(in srgb, var(--color-cyan-400) 30%, transparent);
    }

    .hover\:text-cyan-300:hover {
        color: var(--color-cyan-300);
    }

    /**
     * Pricing tier identity. The Growth tier keeps a violet label, but `primary`
     * only reaches 2.26:1 on the slate-800 card, so the lighter violet-400
     * (5.38:1) carries it instead — matching Core's blue-400 and Scale's
     * amber-400.
     */
    .text-violet-400 {
        color: var(--color-violet-400);
    }

    /* Restored accents already referenced by the landing markup. */
    .text-emerald-400 {
        color: var(--color-emerald-400);
    }

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

    .bg-emerald-400\/80 {
        background-color: color-mix(in srgb, var(--color-emerald-400) 80%, transparent);
    }

    .bg-emerald-500\/20 {
        background-color: color-mix(in srgb, var(--color-emerald-500) 20%, transparent);
    }

    .text-red-400 {
        color: var(--color-red-400);
    }

    .bg-red-400\/80 {
        background-color: color-mix(in srgb, var(--color-red-400) 80%, transparent);
    }

    .text-blue-500 {
        color: var(--color-blue-500);
    }

    .border-blue-400 {
        border-color: var(--color-blue-400);
    }

    .text-amber-300 {
        color: var(--color-amber-300);
    }

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

    .bg-amber-400\/80 {
        background-color: color-mix(in srgb, var(--color-amber-400) 80%, transparent);
    }

    .bg-amber-500\/5 {
        background-color: color-mix(in srgb, var(--color-amber-500) 5%, transparent);
    }

    .bg-amber-500\/20 {
        background-color: color-mix(in srgb, var(--color-amber-500) 20%, transparent);
    }

    .border-amber-400 {
        border-color: var(--color-amber-400);
    }

    .border-amber-500 {
        border-color: var(--color-amber-500);
    }

    .hover\:bg-amber-600:hover {
        background-color: var(--color-amber-600);
    }

    .hover\:border-amber-600:hover {
        border-color: var(--color-amber-600);
    }

    .dark\:text-cyan-400 {
        &:where(.dark, .dark *) {
            color: var(--color-cyan-400);
        }
    }

    .dark\:text-emerald-400 {
        &:where(.dark, .dark *) {
            color: var(--color-emerald-400);
        }
    }

    .dark\:bg-emerald-900 {
        &:where(.dark, .dark *) {
            background-color: var(--color-emerald-900);
        }
    }

    .dark\:text-amber-400 {
        &:where(.dark, .dark *) {
            color: var(--color-amber-400);
        }
    }

    .dark\:text-blue-400 {
        &:where(.dark, .dark *) {
            color: var(--color-blue-400);
        }
    }

    .dark\:bg-amber-900\/15 {
        &:where(.dark, .dark *) {
            background-color: color-mix(in srgb, var(--color-amber-900) 15%, transparent);
        }
    }

    .dark\:border-amber-800\/40 {
        &:where(.dark, .dark *) {
            border-color: color-mix(in srgb, var(--color-amber-800) 40%, transparent);
        }
    }

    .dark\:bg-red-900\/10 {
        &:where(.dark, .dark *) {
            background-color: color-mix(in srgb, var(--color-red-900) 10%, transparent);
        }
    }

    .dark\:bg-red-900\/30 {
        &:where(.dark, .dark *) {
            background-color: color-mix(in srgb, var(--color-red-900) 30%, transparent);
        }
    }

    .dark\:border-red-900\/20 {
        &:where(.dark, .dark *) {
            border-color: color-mix(in srgb, var(--color-red-900) 20%, transparent);
        }
    }
}