/*
 * 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         Header accent-wash overlay opacity (0 = hidden).
 */

/* ── Default ──────────────────────────────────────────────────── */
.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-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-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.1;
}

@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;
}

/* ── 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;
}

/* ── 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;
}

/* ── Info ─────────────────────────────────────────────────────── */
.cevi-variant--info {
    --cevi-v-accent: #86b8dc;
    --cevi-v-accent-hover: #5a97c4;
    --cevi-v-surface: #f7fafc;
    --cevi-v-header-start: #edf4fb;
    --cevi-v-header-end: #e3edf8;
    --cevi-v-border-rgb: 134 184 220;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0;
}

/* ── 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;
}

/* ── 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;
}

/* ── 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;
}

/* ── 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;
}

/* ── 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;
}

/* ── 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;
}

/* ── Blue ─────────────────────────────────────────────────────── */
.cevi-variant--blue {
    --cevi-v-accent: #5b80e0;
    --cevi-v-accent-hover: #3c5ec4;
    --cevi-v-surface: #f5f7ff;
    --cevi-v-header-start: #eaeffd;
    --cevi-v-header-end: #dde5fc;
    --cevi-v-border-rgb: 91 128 224;
    --cevi-v-border-op: 0.2;
    --cevi-v-wash-op: 0;
}

/* ── 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;
}