/* ============================================
   ALVEA - Award-Winning Page Gradient System
   A unified visual language with distinct page personalities
   ============================================ */

/* ============================================
   BASE THEME FOUNDATIONS
   ============================================ */

:root {
    /* Core Background System */
    --page-bg-base: #FAFBFC;
    --page-bg-depth: #F1F5F9;
    --page-surface: #FFFFFF;
    --page-surface-hover: #F8FAFC;
    --page-surface-border: rgba(0, 0, 0, 0.06);

    /* Text Hierarchy */
    --page-text-primary: #0F172A;
    --page-text-secondary: #334155;
    --page-text-tertiary: #64748B;
    --page-text-muted: #94A3B8;

    /* Gradient Intensity */
    --gradient-intensity: 0.08;
    --gradient-spread: 70%;
    --glow-intensity: 0;

    /* Card System */
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: rgba(0, 0, 0, 0.08);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
                   0 4px 12px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08),
                         0 12px 32px rgba(0, 0, 0, 0.06);
    --card-blur: 0px;

    /* Accent Defaults */
    --page-accent: #14B8A6;
    --page-accent-rgb: 20, 184, 166;
    --page-accent-light: #99F6E4;
    --page-accent-dark: #0D9488;

    /* Noise Texture */
    --noise-opacity: 0.015;

    /* Transitions */
    --theme-transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   DARK MODE - COMPLETE INVERSION
   ============================================ */

[data-theme="dark"] {
    /* Deep Immersive Background - Award-Winning Dark */
    --page-bg-base: #030712;
    --page-bg-depth: #0A0F1A;
    --page-surface: rgba(15, 23, 42, 0.85);
    --page-surface-hover: rgba(30, 41, 59, 0.95);
    --page-surface-border: rgba(255, 255, 255, 0.1);

    /* Inverted Text - Maximum Contrast */
    --page-text-primary: #FFFFFF;
    --page-text-secondary: #F1F5F9;
    --page-text-tertiary: #E2E8F0;
    --page-text-muted: #94A3B8;

    /* Enhanced Gradient - More Pronounced */
    --gradient-intensity: 0.35;
    --gradient-spread: 90%;
    --glow-intensity: 1;

    /* Glassmorphism Cards - Premium Feel */
    --card-bg: rgba(15, 23, 42, 0.7);
    --card-border: rgba(255, 255, 255, 0.12);
    --card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
                   0 8px 32px rgba(0, 0, 0, 0.5),
                   inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --card-shadow-hover: 0 0 0 1px rgba(var(--page-accent-rgb), 0.4),
                         0 12px 48px rgba(0, 0, 0, 0.6),
                         0 0 80px rgba(var(--page-accent-rgb), 0.2),
                         inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --card-blur: 24px;

    /* Vibrant Accents in Dark */
    --noise-opacity: 0.03;
}

/* ============================================
   PAGE-SPECIFIC ACCENT PALETTES
   ============================================ */

/* INDEX - Teal Brand Anchor */
.page-index {
    --page-accent: #14B8A6;
    --page-accent-rgb: 20, 184, 166;
    --page-accent-light: #5EEAD4;
    --page-accent-dark: #0F766E;
    --gradient-angle: 135deg;
    --gradient-position: 30% 20%;
}

/* PRICING - Violet Premium */
.page-pricing {
    --page-accent: #8B5CF6;
    --page-accent-rgb: 139, 92, 246;
    --page-accent-light: #A78BFA;
    --page-accent-dark: #7C3AED;
    --gradient-angle: 160deg;
    --gradient-position: 70% 30%;
}

/* CBCT - Cyan Medical Precision */
.page-cbct {
    --page-accent: #06B6D4;
    --page-accent-rgb: 6, 182, 212;
    --page-accent-light: #22D3EE;
    --page-accent-dark: #0891B2;
    --gradient-angle: 120deg;
    --gradient-position: 50% 10%;
}

/* DEMO - Emerald Action */
.page-demo {
    --page-accent: #10B981;
    --page-accent-rgb: 16, 185, 129;
    --page-accent-light: #34D399;
    --page-accent-dark: #059669;
    --gradient-angle: 145deg;
    --gradient-position: 40% 25%;
}

/* AGENTS - Amber AI Warmth */
.page-agents {
    --page-accent: #F59E0B;
    --page-accent-rgb: 245, 158, 11;
    --page-accent-light: #FBBF24;
    --page-accent-dark: #D97706;
    --gradient-angle: 130deg;
    --gradient-position: 60% 15%;
}

/* AUTOMATIONS - Rose Energy */
.page-automations {
    --page-accent: #F43F5E;
    --page-accent-rgb: 244, 63, 94;
    --page-accent-light: #FB7185;
    --page-accent-dark: #E11D48;
    --gradient-angle: 155deg;
    --gradient-position: 35% 20%;
}

/* UPLOAD - Sky Trust */
.page-upload {
    --page-accent: #0EA5E9;
    --page-accent-rgb: 14, 165, 233;
    --page-accent-light: #38BDF8;
    --page-accent-dark: #0284C7;
    --gradient-angle: 140deg;
    --gradient-position: 50% 30%;
}

/* BOOK - Teal Consistency */
.page-book {
    --page-accent: #14B8A6;
    --page-accent-rgb: 20, 184, 166;
    --page-accent-light: #5EEAD4;
    --page-accent-dark: #0F766E;
    --gradient-angle: 150deg;
    --gradient-position: 45% 25%;
}

/* PLATFORM - Indigo Depth */
.page-platform {
    --page-accent: #6366F1;
    --page-accent-rgb: 99, 102, 241;
    --page-accent-light: #818CF8;
    --page-accent-dark: #4F46E5;
    --gradient-angle: 135deg;
    --gradient-position: 55% 20%;
}

/* SIGNUP - Green Positive */
.page-signup {
    --page-accent: #22C55E;
    --page-accent-rgb: 34, 197, 94;
    --page-accent-light: #4ADE80;
    --page-accent-dark: #16A34A;
    --gradient-angle: 145deg;
    --gradient-position: 40% 30%;
}

/* DOCS & LEGAL - Neutral Slate */
.page-docs,
.page-privacy,
.page-terms,
.page-hipaa,
.page-data {
    --page-accent: #64748B;
    --page-accent-rgb: 100, 116, 139;
    --page-accent-light: #94A3B8;
    --page-accent-dark: #475569;
    --gradient-angle: 180deg;
    --gradient-position: 50% 0%;
}

/* VIEWER - Locked Dark (Special Case) */
.page-viewer {
    --page-accent: #3B82F6;
    --page-accent-rgb: 59, 130, 246;
    --page-accent-light: #60A5FA;
    --page-accent-dark: #2563EB;
    --gradient-angle: 135deg;
    --gradient-position: 50% 50%;
}

/* BRAND GUIDE */
.page-brand {
    --page-accent: #EC4899;
    --page-accent-rgb: 236, 72, 153;
    --page-accent-light: #F472B6;
    --page-accent-dark: #DB2777;
    --gradient-angle: 135deg;
    --gradient-position: 50% 25%;
}

/* ============================================
   BODY & BACKGROUND SYSTEM
   ============================================ */

/* Ensure full viewport coverage - no gaps */
html:has(body[class*="page-"]) {
    background-color: var(--page-bg-base) !important;
    min-height: 100% !important;
}

body[class*="page-"] {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    background-color: var(--page-bg-base) !important;
    background-image: none !important;
    color: var(--page-text-primary) !important;
    transition: background-color var(--theme-transition),
                color var(--theme-transition);
    position: relative;
    overflow-x: hidden;
}

/* Primary Gradient Layer */
body[class*="page-"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(
            ellipse var(--gradient-spread) var(--gradient-spread) at var(--gradient-position),
            rgba(var(--page-accent-rgb), var(--gradient-intensity)) 0%,
            rgba(var(--page-accent-rgb), calc(var(--gradient-intensity) * 0.5)) 30%,
            transparent 70%
        );
    transition: all var(--theme-transition);
}

/* Secondary Ambient Glow (Dark Mode Only) */
body[class*="page-"]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--glow-intensity);
    background:
        radial-gradient(
            ellipse 100% 60% at 80% 100%,
            rgba(var(--page-accent-rgb), 0.08) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse 80% 50% at 10% 80%,
            rgba(var(--page-accent-rgb), 0.05) 0%,
            transparent 40%
        );
    transition: opacity var(--theme-transition);
}

/* Noise Texture - Applied to body background-image layer */
body[class*="page-"] {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-attachment: fixed;
}

/* ============================================
   GLASSMORPHISM CARD SYSTEM
   ============================================ */

.glass-card,
[class*="page-"] .card,
[class*="page-"] .feature-card,
[class*="page-"] .pricing-card,
[class*="page-"] .automation-card {
    background: var(--card-bg);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.glass-card:hover,
[class*="page-"] .card:hover,
[class*="page-"] .feature-card:hover,
[class*="page-"] .pricing-card:hover,
[class*="page-"] .automation-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

/* Card Glow Border (Dark Mode) */
[data-theme="dark"] .glass-card::before,
[data-theme="dark"] [class*="page-"] .card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 17px;
    background: linear-gradient(
        135deg,
        rgba(var(--page-accent-rgb), 0.2) 0%,
        transparent 50%,
        rgba(var(--page-accent-rgb), 0.1) 100%
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-theme="dark"] .glass-card:hover::before,
[data-theme="dark"] [class*="page-"] .card:hover::before {
    opacity: 1;
}

/* ============================================
   BUTTON SYSTEM
   ============================================ */

[class*="page-"] .btn-primary,
[class*="page-"] .cta-button,
[class*="page-"] .primary-button {
    background: linear-gradient(135deg, var(--page-accent) 0%, var(--page-accent-dark) 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(var(--page-accent-rgb), 0.3);
}

[class*="page-"] .btn-primary:hover,
[class*="page-"] .cta-button:hover,
[class*="page-"] .primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--page-accent-rgb), 0.4);
}

[data-theme="dark"] [class*="page-"] .btn-primary,
[data-theme="dark"] [class*="page-"] .cta-button,
[data-theme="dark"] [class*="page-"] .primary-button {
    box-shadow: 0 0 20px rgba(var(--page-accent-rgb), 0.3),
                0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] [class*="page-"] .btn-primary:hover,
[data-theme="dark"] [class*="page-"] .cta-button:hover,
[data-theme="dark"] [class*="page-"] .primary-button:hover {
    box-shadow: 0 0 40px rgba(var(--page-accent-rgb), 0.5),
                0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Secondary Button */
[class*="page-"] .btn-secondary {
    background: transparent;
    color: var(--page-accent);
    border: 2px solid var(--page-accent);
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

[class*="page-"] .btn-secondary:hover {
    background: rgba(var(--page-accent-rgb), 0.1);
    border-color: var(--page-accent-light);
}

/* ============================================
   TEXT STYLING
   ============================================ */

[class*="page-"] h1,
[class*="page-"] h2,
[class*="page-"] h3 {
    color: var(--page-text-primary);
    transition: color var(--theme-transition);
}

[class*="page-"] p,
[class*="page-"] span {
    color: var(--page-text-secondary);
    transition: color var(--theme-transition);
}

/* Gradient Text Headings */
[class*="page-"] .gradient-text {
    background: linear-gradient(
        135deg,
        var(--page-accent) 0%,
        var(--page-accent-light) 50%,
        var(--page-accent) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
}

[data-theme="dark"] [class*="page-"] .gradient-text {
    background: linear-gradient(
        135deg,
        var(--page-accent-light) 0%,
        #FFFFFF 50%,
        var(--page-accent-light) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   ACCENT ELEMENTS
   ============================================ */

/* Links */
[class*="page-"] a:not(.btn-primary):not(.btn-secondary):not(.nav-link) {
    color: var(--page-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

[class*="page-"] a:not(.btn-primary):not(.btn-secondary):not(.nav-link):hover {
    color: var(--page-accent-light);
}

/* Dividers */
[class*="page-"] hr,
[class*="page-"] .divider {
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--page-accent-rgb), 0.3),
        transparent
    );
}

/* Selection */
[class*="page-"]::selection,
[class*="page-"] *::selection {
    background: rgba(var(--page-accent-rgb), 0.3);
    color: var(--page-text-primary);
}

/* ============================================
   SPECIAL: VIEWER LOCKED DARK
   ============================================ */

.page-viewer,
.page-viewer[data-theme="light"] {
    --page-bg-base: #000000 !important;
    --page-bg-depth: #0A0A0A !important;
    --page-text-primary: #FFFFFF !important;
    --page-text-secondary: #E2E8F0 !important;
    --gradient-intensity: 0.15 !important;
    --glow-intensity: 1 !important;
    --card-bg: rgba(10, 10, 10, 0.8) !important;
    --card-blur: 20px !important;
}

/* ============================================
   CONTENT Z-INDEX MANAGEMENT
   ============================================ */

[class*="page-"] main,
[class*="page-"] .content,
[class*="page-"] .container,
[class*="page-"] section,
[class*="page-"] header,
[class*="page-"] footer {
    position: relative;
    z-index: 2;
}

/* ============================================
   SMOOTH THEME TRANSITIONS
   ============================================ */

[class*="page-"] *,
[class*="page-"] *::before,
[class*="page-"] *::after {
    transition-property: background-color, border-color, color, box-shadow, opacity;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions on page load */
.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
    transition: none !important;
}

/* ============================================
   SUBTLE GRADIENT ANIMATION (Dark Mode Only)
   ============================================ */

@keyframes gradient-breathe {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.02);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: var(--glow-intensity);
    }
    50% {
        opacity: calc(var(--glow-intensity) * 0.7);
    }
}

[data-theme="dark"] body[class*="page-"]::before {
    animation: gradient-breathe 8s ease-in-out infinite;
}

[data-theme="dark"] body[class*="page-"]::after {
    animation: glow-pulse 6s ease-in-out infinite;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    :root {
        --gradient-spread: 100%;
    }

    [data-theme="dark"] {
        --gradient-spread: 120%;
        --gradient-intensity: 0.4;
    }
}

@media (max-width: 480px) {
    [data-theme="dark"] {
        --gradient-intensity: 0.45;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    body[class*="page-"]::before,
    body[class*="page-"]::after {
        display: none;
    }

    .glass-card,
    [class*="page-"] .card {
        backdrop-filter: none;
        background: white;
        box-shadow: 0 0 1px rgba(0,0,0,0.2);
    }
}
/* Cache bust 1767845099 */