/**
 * Zeeptor Theme Tokens - Ultra-Clean Human-Crafted Modern Dark
 * Inspired by high-end developer platforms (Linear, Vercel, Stripe Dev)
 * 100% Free of AI Purple/Violet Blobs & Gradients
 * Pure Obsidian Canvas • Razor-Sharp Hairline Borders • Crisp Monochrome & Emerald Accents
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ==========================================================================
       ACTIVE THEME: Obsidian Minimalist (Zero AI Gradients)
       ========================================================================== */
    --theme-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --theme-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Base Surfaces */
    --theme-page-bg: #050505;            /* Pure Deep Obsidian Black */
    --theme-surface-1: #0D0D11;          /* Layer 1 Surface */
    --theme-surface-2: #16161D;          /* Layer 2 Surface */
    --theme-header-bg: rgba(10, 10, 10, 0.75); /* Floating Nav Glass */
    --theme-header-sub: rgba(18, 18, 24, 0.85);

    /* Glass Cards & Panels */
    --theme-card-bg: rgba(255, 255, 255, 0.025);
    --theme-card-bg-hover: rgba(255, 255, 255, 0.05);
    --theme-card-border: rgba(255, 255, 255, 0.08);
    --theme-card-border-hover: rgba(255, 255, 255, 0.18);
    --theme-card-divider: rgba(255, 255, 255, 0.06);

    /* Primary Interactive Accent: Crisp Solid White Button on Dark Canvas */
    --theme-primary: #FFFFFF;
    --theme-primary-hover: #E4E4E7;
    --theme-primary-gradient: #FFFFFF;
    --theme-primary-light: rgba(255, 255, 255, 0.08);
    --theme-primary-text: #000000;

    /* Crisp Technical Accents */
    --theme-emerald: #10B981;
    --theme-cyan: #38BDF8;

    /* Typography Hierarchy */
    --theme-text-main: #FFFFFF;          /* Pure White Headings */
    --theme-text-body: #A1A1AA;          /* Crisp neutral Zinc */
    --theme-text-muted: #71717A;         /* Subtitles & Descriptions */
    --theme-text-light: #52525B;         /* Micro labels & metadata */

    /* Semantic Status Indicators */
    --theme-success: #10B981;
    --theme-success-bg: rgba(16, 185, 129, 0.10);
    --theme-warning: #F59E0B;
    --theme-warning-bg: rgba(245, 158, 11, 0.10);
    --theme-danger: #EF4444;
    --theme-danger-bg: rgba(239, 68, 68, 0.10);

    /* Metrics & Progress */
    --theme-progress-bg: rgba(255, 255, 255, 0.08);
    --theme-progress-bar: #FFFFFF;
}

/* Global Typography & Reset */
html, body {
    font-family: var(--theme-font-sans);
    background-color: var(--theme-page-bg);
    color: var(--theme-text-body);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Crisp Clean Neutral Engineering Grid (Zero Purple, Zero AI Slop) */
.pixel-grid {
    background-size: 32px 32px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 65% 50% at 50% 0%, #000 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 65% 50% at 50% 0%, #000 60%, transparent 100%);
}

/* Floating Glass Navbar */
.pixel-nav {
    background-color: var(--theme-header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--theme-card-border);
    border-radius: 1rem;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.8);
}

/* Pure Neutral Glass Card */
.pixel-card {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: 1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pixel-card:hover {
    background-color: var(--theme-card-bg-hover);
    border-color: var(--theme-card-border-hover);
    transform: translateY(-2px);
}

/* High-Contrast Primary Button (Clean Solid White Pill) */
.pixel-btn-primary {
    background-color: #FFFFFF;
    color: #000000;
    font-weight: 600;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 255, 255, 0.12);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pixel-btn-primary:hover {
    background-color: #E4E4E7;
    color: #000000;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.20);
}

.pixel-btn-primary:active {
    transform: scale(0.98);
}

/* High-Craft Secondary Button (Neutral Glass Pill) */
.pixel-btn-secondary {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #D4D4D8;
    font-weight: 500;
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pixel-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.20);
    color: #FFFFFF;
}

.pixel-btn-secondary:active {
    transform: scale(0.98);
}

/* Metallic White / Silver Text Gradient (No Purple) */
.pixel-gradient-text {
    background: linear-gradient(180deg, #FFFFFF 0%, #D4D4D8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Backward-compatible card styling */
.sg-card {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: 1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.2s ease;
}

.sg-card:hover {
    border-color: var(--theme-card-border-hover);
}

.sg-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--theme-card-divider);
    background: transparent;
}

.sg-btn-primary {
    background-color: #FFFFFF;
    color: #000000;
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.2s ease;
}

.sg-btn-primary:hover {
    background-color: #E4E4E7;
}

/* Marquee / Infinite Ticker Animation */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: inline-flex;
    animation: marquee 22s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}