/*
 * CEVI Variant palette — generic cascade tokens.
 *
 * Apply a single `.cevi-variant--{name}` class to any component root element.
 * Each component reads the tokens below via `var(--cevi-v-*, fallback)`.
 * Adding a new variant only requires changes inside this file.
 *
 * Tokens exposed:
 *   --cevi-v-accent          Main accent / brand color.
 *   --cevi-v-accent-hover    Darker shade for interactive hover states.
 *   --cevi-v-surface         Component surface / background.
 *   --cevi-v-header-start    Gradient start for header backgrounds.
 *   --cevi-v-header-end      Gradient end for header backgrounds.
 *   --cevi-v-border-rgb      Space-separated R G B of the accent ring color.
 *   --cevi-v-border-op       Opacity of the accent ring / border.
 *   --cevi-v-wash-op         Static header accent-wash overlay opacity.
 *   --cevi-chrome-strip-opacity  Shared top accent-strip opacity.
 *   --cevi-chrome-wash-opacity   Shared header wash opacity alias.
 *   --cevi-card-*                UiCard appearance and spacing tokens.
 *
 * Note: --cevi-v-accent-motion-opacity is reserved for strip animation
 * intensity only. Do not add it into static wash opacity formulas.
 *
 * Use UiColorVariant.Primary for section/module chrome. Other components
 * keep Default (or an explicit semantic variant) unless overridden.
 */

/* ── Shared chrome defaults ───────────────────────────────────── */
.cevi-variant--default,
.cevi-variant--warning,
.cevi-variant--danger,
.cevi-variant--success,
.cevi-variant--info,
.cevi-variant--rose,
.cevi-variant--violet,
.cevi-variant--teal,
.cevi-variant--indigo,
.cevi-variant--orange,
.cevi-variant--yellow,
.cevi-variant--blue,
.cevi-variant--green,
.cevi-variant--primary {
    --cevi-v-accent-motion-opacity: 0.26;
    --cevi-v-accent-strip-animation: cevi-accent-breathe;
    --cevi-v-accent-strip-duration: 4s;
    --cevi-v-accent-strip-timing: ease-in-out;
    --cevi-v-accent-strip-iteration: infinite;
    --cevi-chrome-strip-opacity: 0.85;
    --cevi-chrome-wash-opacity: var(--cevi-v-wash-op, 0.12);

    --cevi-card-top-radius: 1rem;
    --cevi-card-top-header-gap: 0.35rem;
    --cevi-card-top-header-padding: 1.15rem 1.5rem;
    --cevi-card-top-header-border-width: 1px;
    --cevi-card-top-header-border-color: rgb(15 23 42 / 0.08);
    --cevi-card-top-accent-strip-height: 2px;
    --cevi-card-top-body-gap: 1rem;
    --cevi-card-top-body-padding: 1rem;
    --cevi-card-top-footer-gap: 0.75rem;
    --cevi-card-top-footer-padding: 1rem 1.5rem;
    --cevi-card-top-footer-border-width: 1px;
    --cevi-card-top-footer-border-color: rgb(15 23 42 / 0.06);
    --cevi-card-top-footer-background: rgb(15 23 42 / 0.02);
    --cevi-card-top-shadow: 0 12px 22px -16px rgb(15 23 42 / 0.18), 0 4px 8px -4px rgb(15 23 42 / 0.08), 0 0 0 1px rgb(var(--cevi-v-border-rgb, 15 23 42) / var(--cevi-v-border-op, 0.06));
    --cevi-card-top-shadow-hover: 0 22px 40px -16px rgb(15 23 42 / 0.2), 0 10px 18px -10px rgb(15 23 42 / 0.12), 0 0 0 1px color-mix(in srgb, var(--cevi-v-accent, #007cb4) 88%, white);

    --cevi-card-left-radius: 1.25rem;
    --cevi-card-left-border-width: 1px;
    --cevi-card-left-border-color: rgb(var(--cevi-v-border-rgb, 15 23 42) / var(--cevi-v-border-op, 0.12));
    --cevi-card-left-header-gap: 0.5rem;
    --cevi-card-left-header-padding: 1.25rem 1.5rem 1.125rem 1.75rem;
    --cevi-card-left-header-border-width: 1px;
    --cevi-card-left-header-border-color: rgb(var(--cevi-v-border-rgb, 15 23 42) / 0.12);
    --cevi-card-left-header-background: linear-gradient(145deg, var(--cevi-v-header-start, #f4f8fc), var(--cevi-card-background, var(--cevi-v-surface, #ffffff)) 76%);
    --cevi-card-left-body-gap: 0.875rem;
    --cevi-card-left-body-padding: 1.25rem 1.5rem;
    --cevi-card-left-footer-gap: 0.75rem;
    --cevi-card-left-footer-margin: 0 1rem 1rem;
    --cevi-card-left-footer-padding: 0.75rem 1rem;
    --cevi-card-left-footer-border-width: 1px;
    --cevi-card-left-footer-border-color: rgb(var(--cevi-v-border-rgb, 15 23 42) / 0.12);
    --cevi-card-left-footer-radius: 0.875rem;
    --cevi-card-left-footer-background: var(--cevi-card-background, var(--cevi-v-surface, #ffffff));
    --cevi-card-left-accent-rail-width: 0.25rem;
    --cevi-card-left-shadow: 0 10px 22px -16px rgb(15 23 42 / 0.26), 0 1px 2px rgb(15 23 42 / 0.05);
    --cevi-card-left-shadow-hover: 0 18px 34px -18px rgb(15 23 42 / 0.3), 0 3px 7px rgb(15 23 42 / 0.08);
    --cevi-card-left-transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease;

    --cevi-card-text-color: #1e293b;
    --cevi-card-header-muted-color: #334155;
    --cevi-card-footer-color: #475569;
    --cevi-card-footer-font-size: 0.875rem;
}

.cevi-variant--default {
    --cevi-v-accent: #007cb4;
    --cevi-v-accent-hover: #005f8a;
    --cevi-v-surface: #ffffff;
    --cevi-v-header-start: #f4f8fc;
    --cevi-v-header-end: #eaf1f8;
    --cevi-v-border-rgb: 15 23 42;
    --cevi-v-border-op: 0.06;
    --cevi-v-wash-op: 0.12;
}

@keyframes cevi-accent-breathe {
    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.45;
    }
}

@keyframes cevi-accent-sweep {
    0% {
        background-position: -120% 50%;
    }

    /* Mirror the sweep so the loop boundary no longer snaps back to the start position. */
    50% {
        background-position: 220% 50%;
    }

    100% {
        background-position: -120% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    [class^="cevi-variant--"],
    [class*=" cevi-variant--"] {
        --cevi-v-accent-strip-animation: none;
        --cevi-v-accent-strip-duration: 1ms;
        --cevi-v-accent-strip-iteration: 1;
    }
}

/* ── Warning ──────────────────────────────────────────────────── */
.cevi-variant--warning {
    --cevi-v-accent: #e8b85b;
    --cevi-v-accent-hover: #c99430;
    --cevi-v-surface: #fdfbf7;
    --cevi-v-header-start: #fdf7e9;
    --cevi-v-header-end: #f8efdc;
    --cevi-v-border-rgb: 232 184 91;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.12;
}

/* ── Danger ───────────────────────────────────────────────────── */
.cevi-variant--danger {
    --cevi-v-accent: #d06565;
    --cevi-v-accent-hover: #b04444;
    --cevi-v-surface: #fffafa;
    --cevi-v-header-start: #fff0f0;
    --cevi-v-header-end: #fbe6e6;
    --cevi-v-border-rgb: 208 101 101;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.12;
}

/* ── Success ──────────────────────────────────────────────────── */
.cevi-variant--success {
    --cevi-v-accent: #5bcf88;
    --cevi-v-accent-hover: #38a862;
    --cevi-v-surface: #f7fdf9;
    --cevi-v-header-start: #eaf8ef;
    --cevi-v-header-end: #e0f3e7;
    --cevi-v-border-rgb: 91 207 136;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.12;
}

/* ── Info ─────────────────────────────────────────────────────── */
/* Soft sky blue — cooler than Default, gentler than Primary, not neon. */
.cevi-variant--info {
    --cevi-v-accent: #0ea5e9;
    --cevi-v-accent-hover: #0284c7;
    --cevi-v-surface: #f0f9ff;
    --cevi-v-header-start: #e0f2fe;
    --cevi-v-header-end: #c7e9fb;
    --cevi-v-border-rgb: 14 165 233;
    --cevi-v-border-op: 0.18;
    --cevi-v-wash-op: 0.11;
}

/* ── Rose ─────────────────────────────────────────────────────── */
.cevi-variant--rose {
    --cevi-v-accent: #d0508a;
    --cevi-v-accent-hover: #b03570;
    --cevi-v-surface: #fff5f9;
    --cevi-v-header-start: #fde6f2;
    --cevi-v-header-end: #fad6e8;
    --cevi-v-border-rgb: 208 80 138;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.12;
}

/* ── Violet ───────────────────────────────────────────────────── */
.cevi-variant--violet {
    --cevi-v-accent: #a88ddf;
    --cevi-v-accent-hover: #8668c0;
    --cevi-v-surface: #fbf8ff;
    --cevi-v-header-start: #f3ebff;
    --cevi-v-header-end: #e8dcfb;
    --cevi-v-border-rgb: 168 141 223;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.12;
}

/* ── Teal ─────────────────────────────────────────────────────── */
.cevi-variant--teal {
    --cevi-v-accent: #63bfb0;
    --cevi-v-accent-hover: #459a8c;
    --cevi-v-surface: #f6fcfb;
    --cevi-v-header-start: #ebf8f6;
    --cevi-v-header-end: #def2ef;
    --cevi-v-border-rgb: 99 191 176;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.12;
}

/* ── Indigo ───────────────────────────────────────────────────── */
.cevi-variant--indigo {
    --cevi-v-accent: #8d97df;
    --cevi-v-accent-hover: #6b75c0;
    --cevi-v-surface: #f7f8ff;
    --cevi-v-header-start: #eef0fc;
    --cevi-v-header-end: #e1e5fa;
    --cevi-v-border-rgb: 141 151 223;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.12;
}

/* ── Orange ───────────────────────────────────────────────────── */
.cevi-variant--orange {
    --cevi-v-accent: #d97a35;
    --cevi-v-accent-hover: #b85f1f;
    --cevi-v-surface: #fdf8f3;
    --cevi-v-header-start: #fdf0e3;
    --cevi-v-header-end: #f9e4d2;
    --cevi-v-border-rgb: 217 122 53;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.12;
}

/* ── Yellow ───────────────────────────────────────────────────── */
.cevi-variant--yellow {
    --cevi-v-accent: #c9a020;
    --cevi-v-accent-hover: #a88010;
    --cevi-v-surface: #fdfdf2;
    --cevi-v-header-start: #fdfae5;
    --cevi-v-header-end: #f9f5d5;
    --cevi-v-border-rgb: 201 160 32;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.12;
}

/* ── Blue ─────────────────────────────────────────────────────── */
/* Soft true azure — lighter than Primary so section chrome stays dominant. */
.cevi-variant--blue {
    --cevi-v-accent: #3b82f6;
    --cevi-v-accent-hover: #2563eb;
    --cevi-v-surface: #f8fbff;
    --cevi-v-header-start: #f0f7ff;
    --cevi-v-header-end: #e4effe;
    --cevi-v-border-rgb: 59 130 246;
    --cevi-v-border-op: 0.16;
    --cevi-v-wash-op: 0.08;
}

/* ── Green ────────────────────────────────────────────────────── */
.cevi-variant--green {
    --cevi-v-accent: #3d9e6b;
    --cevi-v-accent-hover: #2a7d52;
    --cevi-v-surface: #f3fcf7;
    --cevi-v-header-start: #e4f7ed;
    --cevi-v-header-end: #d6f0e2;
    --cevi-v-border-rgb: 61 158 107;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.12;
}

/* ── Primary ──────────────────────────────────────────────────── */
/* Strongest brand chrome for module/page section headers. */
.cevi-variant--primary {
    --cevi-v-accent: #007cb4;
    --cevi-v-accent-hover: #005f8a;
    --cevi-v-surface: #ffffff;
    --cevi-v-header-start: #c5e4f5;
    --cevi-v-header-end: #9ed0ea;
    --cevi-v-border-rgb: 0 124 180;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0.28;
}