/**
 * Border Effects — Gradient Borders
 *
 * Uses dual background with background-clip technique.
 * Works with border-radius (unlike border-image).
 *
 * Non-bg-layers elements: Direct CSS on element.
 * bg-layers elements: Uses .bg-layers__border div (see base.css).
 */

/* ==========================================================================
   Gradient Border Base
   ========================================================================== */

[class*="border-fx-gradient"]:not(.bg-layers__border) {
    border: var(--border-fx-width, 2px) solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

/* ==========================================================================
   Gradient Presets (5)
   ========================================================================== */

/* Rainbow — playful, creative */
.border-fx-gradient-rainbow {
    --border-fx-gradient: conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}
.border-fx-gradient-rainbow:not(.bg-layers__border) {
    background-image:
        linear-gradient(var(--color-base-100), var(--color-base-100)),
        conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}

/* Primary — brand-aligned */
.border-fx-gradient-primary {
    --border-fx-gradient: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.border-fx-gradient-primary:not(.bg-layers__border) {
    background-image:
        linear-gradient(var(--color-base-100), var(--color-base-100)),
        linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

/* Sunset — warm, editorial */
.border-fx-gradient-sunset {
    --border-fx-gradient: linear-gradient(135deg, #ff6b35, #f7c59f, #efefd0);
}
.border-fx-gradient-sunset:not(.bg-layers__border) {
    background-image:
        linear-gradient(var(--color-base-100), var(--color-base-100)),
        linear-gradient(135deg, #ff6b35, #f7c59f, #efefd0);
}

/* Ocean — cool, tech */
/* Metallic — premium, corporate */
.border-fx-gradient-metallic {
    --border-fx-gradient: linear-gradient(135deg, var(--color-base-300), var(--color-neutral), var(--color-base-300));
}
.border-fx-gradient-metallic:not(.bg-layers__border) {
    background-image:
        linear-gradient(var(--color-base-100), var(--color-base-100)),
        linear-gradient(135deg, var(--color-base-300), var(--color-neutral), var(--color-base-300));
}