/* @import "tailwindcss"; */

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
}

:root {
    --bg: #0b0f1a;
    --ink: #e6e8ef;
    --muted: #9aa3b2;
    --x-blue: #00b4ff;
    --x-purple: #7a5cff;
    --x-pink: #ff2da6;
    --x-orange: #ff8a00;
    --grad-1: linear-gradient(
        135deg,
        var(--x-blue),
        var(--x-purple) 35%,
        var(--x-pink) 70%,
        var(--x-orange)
    );
    --grad-2: linear-gradient(
        135deg,
        rgba(0, 180, 255, 0.18),
        rgba(122, 92, 255, 0.18) 35%,
        rgba(255, 45, 166, 0.18) 70%,
        rgba(255, 138, 0, 0.18)
    );
    --card: #0f1524;
    --card-2: #121a2d;
    --ring: 0 0 0 1.5px rgba(255, 255, 255, 0.08),
        0 0 0 6px rgba(122, 92, 255, 0.12);
}
html,
body {
    background: var(--bg);
    color: var(--ink);
}
.card {
    background: var(--card);
}
.card-2 {
    background: var(--card-2);
}
.grad-text {
    background: var(--grad-1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.btn-primary {
    background: var(--grad-1);
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 8px 28px rgba(122, 92, 255, 0.35);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(255, 45, 166, 0.35);
}
.btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: var(--ink);
}
.input {
    background: #0c1221;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ink);
}
.ring-grad {
    box-shadow: var(--ring);
}
.pill {
    background: var(--grad-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.tag {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cfd6e4;
}
.divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.12),
        transparent
    );
}