/* AdminDash css 01: Design tokens, base element styles, scrollbars, background effects, layout primitives */

/* ============================================
   AdminDash - Deepgram-Style Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Colors - Deepgram palette */
    --black: #000000;
    --bg: #0A0A0A;
    --bg-elevated: #101014;
    --bg-card: #1A1A1F;

    --white: #FFFFFF;
    --gray-100: #F3F3F3;
    --gray-200: #E5E5E5;
    --gray-300: #D4D4D4;
    --gray-400: #B0B7C0;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;

    /* Deepgram accent colors */
    --green: #13EF95;
    --green-dim: rgba(19, 239, 149, 0.1);
    --cyan: #149AFB;
    --purple: #7800ED;
    --yellow: #facc15;
    --primary: #13EF95;

    /* Gradients */
    --gradient-primary: linear-gradient(90deg, #149AFB, #13EF95);
    --gradient-text: linear-gradient(90deg, #149AFB, #13EF95);

    /* Overlay channels for theme-aware semi-transparent colors */
    --overlay: 255, 255, 255;      /* white overlays for dark theme */
    --overlay-inv: 0, 0, 0;        /* black overlays for dark theme */

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --container-max: 1280px;
    --section-px: 20px;
}

@media (min-width: 768px) {
    :root { --section-px: 32px; }
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: var(--black);
    color: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(var(--overlay), 0.05);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--overlay), 0.18);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--overlay), 0.3);
}

/* Firefox scrollbar */
* {
    scrollbar-width: auto;
    scrollbar-color: rgba(var(--overlay), 0.18) rgba(var(--overlay), 0.05);
}

/* ============================================
   Background Effects
   ============================================ */

.aurora-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(19, 239, 149, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(20, 154, 251, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 0% 100%, rgba(120, 0, 237, 0.08) 0%, transparent 50%);
}

.stars-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
}

.noise-overlay {
    display: none;
}

/* ============================================
   Layout
   ============================================ */

.public-layout {
    min-height: 100vh;
}

.landing {
    position: relative;
    z-index: 1;
    overflow-x: hidden;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--section-px);
}