@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
}

@import 'tailwindcss';

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

@theme {
    /* Dark mode (default) */
    --color-bg: #0a0a0f;
    --color-s1: #111117;
    --color-s2: #16161e;
    --color-s3: #1c1c26;
    --color-b1: rgb(255 255 255 / 8%);
    --color-b2: rgb(255 255 255 / 14%);
    --color-t1: #f0f0f5;
    --color-t2: #8888a0;
    --color-t3: #44445a;

    /* Accent — purple-pink gradient, consistent across both themes */
    --color-blue: #7c3aed;
    --color-accent: #7c3aed;
    --color-accent-2: #ec4899;

    --color-green: #3ecf8e;
    --color-amber: #f5a623;
    --color-red: #f05252;

    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

[data-theme="light"] {
    --color-bg: #ffffff;
    --color-s1: #ffffff;
    --color-s2: #f9fafb;
    --color-s3: #f3f4f6;
    --color-b1: #e5e7eb;
    --color-b2: #d1d5db;
    --color-t1: #111827;
    --color-t2: #6b7280;
    --color-t3: #9ca3af;

    --color-blue: #7c3aed;
    --color-accent: #7c3aed;
    --color-accent-2: #ec4899;

    --color-green: #10b981;
    --color-amber: #f59e0b;
    --color-red: #ef4444;
}

/* Visible borders on all themes */
*, ::before, ::after { border-color: var(--color-b1); }

/* Base typography scale */
html { font-size: 14px; }
body { font-size: 0.875rem; line-height: 1.5; }

h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }

/* Refined scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-t3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-t2); }

/* Text rendering */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.font-mono, code, pre { font-variant-numeric: tabular-nums; }

/* Number glow for metrics */
.metric-num {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Card depth shadow */
.card-shadow {
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.04) inset,
        0 -1px 0 0 rgba(0,0,0,0.2) inset,
        0 4px 16px rgba(0,0,0,0.3);
}

/* Accent-top card — top border is accent gradient */
.card-accent-top {
    position: relative;
}
.card-accent-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Page-load stagger reveal */
@keyframes nim-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nim-reveal {
    opacity: 0;
    animation: nim-fade-up 0.35s ease forwards;
}
.nim-reveal-1 { animation-delay: 0.05s; }
.nim-reveal-2 { animation-delay: 0.12s; }
.nim-reveal-3 { animation-delay: 0.19s; }
.nim-reveal-4 { animation-delay: 0.26s; }
.nim-reveal-5 { animation-delay: 0.33s; }

/* Shimmer for loading skeletons */
@keyframes nim-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.nim-skeleton {
    background: linear-gradient(90deg, var(--color-s2) 25%, var(--color-s3) 50%, var(--color-s2) 75%);
    background-size: 200% 100%;
    animation: nim-shimmer 1.4s infinite;
    border-radius: 4px;
}

/* Subtle grid background for stat sections */
.bg-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Table row hover with left accent bar */
.table-row-hover {
    position: relative;
    transition: background 0.12s ease;
}
.table-row-hover::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
    transform: scaleY(0);
    transition: transform 0.15s ease;
    border-radius: 0 2px 2px 0;
}
.table-row-hover:hover::before {
    transform: scaleY(1);
}

/* Pill badge base */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

@layer utilities {
    .bg-accent-gradient {
        background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    }
    .text-accent-gradient {
        background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .border-accent-gradient {
        border-image: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)) 1;
    }
    .tabular-nums { font-variant-numeric: tabular-nums; }
}