/**
 * Zeeptor Client Portal - Central Theme Tokens
 * Ultra-Clean Human-Crafted Modern Dark (Zero 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.85); /* Top bar */
    --theme-header-sub: rgba(18, 18, 24, 0.95); /* Sub bar */
    --theme-header-text: #FFFFFF;
    --theme-header-muted: #71717A;

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

    /* 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);

    /* 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;
}

/* Typography & Layout Utility Classes */
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;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Subtle Clean Neutral Engineering Grid */
.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%);
}

/* Neutral Glass Cards */
.sg-card, .pixel-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 cubic-bezier(0.4, 0, 0.2, 1);
}

.sg-card:hover, .pixel-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;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

/* High-Contrast Primary Button (Clean Solid White Pill) */
.sg-btn-primary, .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);
}

.sg-btn-primary:hover, .pixel-btn-primary:hover {
    background-color: #E4E4E7;
    color: #000000;
    transform: translateY(-1px);
}

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

/* Secondary Button (Neutral Glass Pill) */
.sg-btn-secondary, .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;
}

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

/* Custom Obsidian Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.30);
}

/* Base Obsidian Control Styles */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], textarea, select {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
    outline: none;
    transition: all 0.2s ease;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.20);
}

select option {
    background-color: #0A0A0E;
    color: #FFFFFF;
}

/* Glass Sub-Panels */
.pixel-box {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
}