/* ==========================================================================
   ARTTECHES.COM — Global Unified Multi-Layer Design System (2026 UI)
   Deep Midnight Navy, Dark Royal Blue, Electric Blue, Neon Purple & Cyan Glow
   ========================================================================== */

:root {
    /* ======================================================================
       1. MULTI-LAYER BACKGROUND ARCHITECTURE
       ====================================================================== */
    --art-bg-primary: #050821;               /* Deep Midnight Navy (Hero, Marketplace, About) */
    --art-bg-secondary: #070B28;             /* Dark Royal Navy (Categories, Why Us) */
    --art-bg-alternate: #090D30;             /* Dark Indigo (Courses, Testimonials) */
    --art-bg-elevated: #0C1238;              /* Elevated surface */
    --art-bg-card: rgba(14, 22, 68, 0.72);   /* Multi-layer dark glass card surface */
    --art-bg-card-hover: rgba(22, 34, 98, 0.85); /* Hover card surface */
    --art-bg-header: rgba(3, 5, 20, 0.92);   /* Sticky Header dark glass */
    --art-bg-footer: #030514;                /* Ultra-Deep Midnight Navy for Footer */

    /* Gradients */
    --art-gradient-hero: linear-gradient(180deg, #030514 0%, #050821 100%);
    --art-gradient-cyber: linear-gradient(135deg, #050821 0%, #0F123C 50%, #050821 100%);
    --art-gradient-cta: linear-gradient(135deg, #087BFF 0%, #791BFF 100%);
    --art-gradient-promo: linear-gradient(135deg, #070B28 0%, #170E44 50%, #08123A 100%);
    --art-gradient-accent: linear-gradient(135deg, #00F0FF 0%, #087BFF 50%, #791BFF 100%);

    /* ======================================================================
       2. BRAND ACCENT COLORS
       ====================================================================== */
    --art-blue-electric: #087BFF;
    --art-blue-royal: #1E40AF;
    --art-blue-neon: #00B4D8;
    --art-blue-cyan: #00F0FF;
    --art-cyan-subtle: #38BDF8;
    --art-purple-premium: #791BFF;
    --art-purple-neon: #A855F7;
    --art-purple-light: #C084FC;
    --art-green-verified: #34D399;
    --art-gold-star: #F5B942;

    /* Legacy mapping for backward compatibility */
    --art-navy-deep: var(--art-bg-primary);
    --art-navy-surface: var(--art-bg-secondary);
    --art-navy-elevated: var(--art-bg-elevated);
    --art-navy-card: var(--art-bg-card);
    --art-navy-card-hover: var(--art-bg-card-hover);
    --art-white: #FFFFFF;

    /* ======================================================================
       3. TYPOGRAPHY COLOR HIERARCHY
       ====================================================================== */
    --art-text-heading-primary: #FFFFFF;    /* Primary Headings: Bright White */
    --art-text-heading-secondary: #E2E8F0;  /* Secondary Headings: Light Blue-White */
    --art-text-subtitle: #38BDF8;           /* Section Subtitles: Subtle Cyan / Electric Blue */
    --art-text-body: #CBD5E1;               /* Body Paragraphs: Soft Grey-White */
    --art-text-muted: #94A3B8;              /* Secondary Descriptions: Muted Blue-Grey */
    --art-text-subtle: #64748B;             /* Meta, Dividers & Footnotes */
    --art-text-price: #38BDF8;              /* High-Contrast Product / Course Price */

    /* Slate hierarchy */
    --art-slate-100: #F1F5F9;
    --art-slate-200: #E2E8F0;
    --art-slate-300: #CBD5E1;
    --art-slate-400: #94A3B8;
    --art-slate-500: #64748B;
    --art-slate-900: #0F172A;

    /* State Accents */
    --art-success: #10B981;
    --art-warning: #F59E0B;
    --art-danger: #EF4444;

    /* ======================================================================
       4. BORDERS, GLASSMORPHISM & SHADOWS
       ====================================================================== */
    --art-border-subtle: rgba(8, 123, 255, 0.16);
    --art-border-glass: rgba(121, 43, 255, 0.2);
    --art-border-medium: rgba(121, 43, 255, 0.28);
    --art-border-hover: rgba(8, 123, 255, 0.45);
    --art-glass-blur: 16px;

    --art-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(8, 123, 255, 0.08);
    --art-shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 25px rgba(8, 123, 255, 0.2);
    --art-shadow-glow: 0 0 30px rgba(121, 43, 255, 0.35);

    /* Typography & Sizing */
    --art-font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --art-radius-sm: 8px;
    --art-radius-md: 14px;
    --art-radius-lg: 20px;
    --art-radius-pill: 9999px;
}

/* Base Body Application across all public pages */
body,
body.art-theme-active,
.art-dark-layout {
    background-color: var(--art-bg-primary);
    color: var(--art-text-body);
    font-family: var(--art-font-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings Global Contrast */
h1, h2, h3, h4, h5, h6 {
    color: var(--art-text-heading-primary);
    font-family: var(--art-font-main);
    letter-spacing: -0.02em;
}

p {
    color: var(--art-text-body);
    line-height: 1.65;
}

/* Section Eyebrow Badges */
.art-sec-eyebrow,
.eyebrow-dark,
.eyebrow-light {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(121, 43, 255, 0.16);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #C084FC !important;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: var(--art-radius-pill);
    box-shadow: 0 4px 14px rgba(121, 43, 255, 0.2);
    backdrop-filter: blur(8px);
}

.eyebrow-cyan {
    background: rgba(8, 123, 255, 0.16);
    border-color: rgba(56, 189, 248, 0.45);
    color: #38BDF8 !important;
}

/* Unified Brand Text Gradient */
.art-brand-gradient-text {
    background: linear-gradient(135deg, #00F0FF 0%, #38BDF8 25%, #C084FC 60%, #A855F7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 14px rgba(121, 43, 255, 0.35));
}

/* Multi-Layer Glassmorphic Card Container */
.art-card-glass {
    background: var(--art-bg-card);
    border: 1px solid var(--art-border-subtle);
    border-radius: var(--art-radius-lg);
    box-shadow: var(--art-shadow-card);
    backdrop-filter: blur(var(--art-glass-blur));
    -webkit-backdrop-filter: blur(var(--art-glass-blur));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.art-card-glass:hover {
    transform: translateY(-6px);
    box-shadow: var(--art-shadow-hover);
    border-color: var(--art-border-hover);
    background: var(--art-bg-card-hover);
}

/* Primary Glow Button (Purple/Blue Gradient) */
.art-btn-glow {
    background: linear-gradient(135deg, #087BFF 0%, #791BFF 100%);
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--art-radius-pill);
    padding: 12px 28px;
    font-weight: 800;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(8, 123, 255, 0.4), 0 0 15px rgba(121, 27, 255, 0.25);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.art-btn-glow:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 28px rgba(8, 123, 255, 0.6), 0 0 25px rgba(121, 27, 255, 0.45);
    color: #FFFFFF !important;
}

/* Secondary Glass Border Button */
.art-btn-glass {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--art-radius-pill);
    color: #FFFFFF !important;
    padding: 11px 24px;
    font-weight: 700;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.art-btn-glass:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(56, 189, 248, 0.6);
    color: #38BDF8 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(8, 123, 255, 0.25);
}

/* Section Header Typography */
.art-sec-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 48px;
}

.art-sec-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 900;
    color: var(--art-text-heading-primary) !important;
    margin: 12px 0;
    letter-spacing: -0.02em;
    line-height: 1.22;
}

.art-sec-desc {
    font-size: 16px;
    color: var(--art-text-muted) !important;
    line-height: 1.65;
    margin: 0;
}

/* Glass Form Inputs */
.art-input-glass {
    width: 100%;
    background: rgba(8, 13, 43, 0.85);
    border: 1px solid var(--art-border-subtle);
    border-radius: var(--art-radius-md);
    color: #FFFFFF;
    padding: 12px 18px;
    font-size: 14.5px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.art-input-glass:focus {
    border-color: var(--art-blue-electric);
    box-shadow: 0 0 16px rgba(8, 123, 255, 0.4);
}

.art-input-glass::placeholder {
    color: var(--art-text-muted);
}


/* ==========================================================================
   5. UNIVERSAL BRAND CONTRAST GUARANTEE & FAIL-SAFE ENGINE (2026)
   Eradicates "same bg same text" and enforces cyber midnight brand standards
   ========================================================================== */

/* Legacy CSS Variable Compatibility Mapping */
:root {
    --bg-body: var(--art-bg-primary);
    --bg-surface: var(--art-bg-secondary);
    --bg-card: var(--art-bg-card);
    --bg-muted: var(--art-bg-alternate);
    --text-primary: var(--art-text-heading-primary);
    --text-secondary: var(--art-text-body);
    --text-muted: var(--art-text-muted);
    --accent-orange: var(--art-blue-electric);
    --accent-orange-hover: #0066D6;
    --border-color: var(--art-border-subtle);
}

/* Universal Anti-Glare & Light Container Neutralizer */
.bg-white,
.bg-light,
.white-bg,
.card-white,
.panel-white,
.box-white,
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: #ffffff"],
[style*="background:#ffffff"],
[style*="background: white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background-color: white"] {
    background: var(--art-bg-card, rgba(14, 22, 68, 0.85)) !important;
    border-color: var(--art-border-subtle, rgba(8, 123, 255, 0.22)) !important;
    color: var(--art-text-body, #CBD5E1) !important;
}

/* Master Public Page Body Standard */
body, body.public-body, .public-body {
    background: var(--art-bg-primary, #050821) !important;
    color: var(--art-text-body, #CBD5E1) !important;
}

/* Typography High Contrast Guarantee: Bright White Headings */
h1, h2, h3, h4, h5, h6,
.title, .card-title, .heading,
.art-sec-title, .sec-title, .section-title,
.course-title, .product-title, .repo-title,
.art-cat-title, .art-course-title, .art-prod-title, .art-repo-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

p, .desc, .description, .art-sec-desc, .course-desc, .prod-desc, .repo-desc {
    color: #CBD5E1 !important;
}

.text-muted, .meta, .date, .time, .author-name, .instructor-role {
    color: #94A3B8 !important;
}

/* Universal Dark Glass Surfaces for all Market Cards & Drawers */
.art-product-card,
.mp-card,
.product-card,
.product-item-card,
.ie-product-card,
.art-course-card,
.course-card,
.art-repo-flagship-card,
.repo-card,
.creator-card,
.cat-card-universe,
.trust-feature-card,
.free-card,
.product-card-enhanced,
.category-chip-card,
.mobile-auth-card,
.auth-card,
.login-card,
.register-card,
.drawer-panel,
.search-modal-container,
.quick-view-modal-container {
    background: var(--art-bg-card, rgba(14, 22, 68, 0.85)) !important;
    border: 1px solid var(--art-border-subtle, rgba(8, 123, 255, 0.2)) !important;
    color: var(--art-text-body, #CBD5E1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(12px) !important;
}

/* Form Controls & Inputs Dark Glass Standard */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea,
.form-control,
.search-input,
.art-input-glass {
    background: rgba(8, 13, 43, 0.88) !important;
    border: 1px solid rgba(8, 123, 255, 0.25) !important;
    color: #FFFFFF !important;
    border-radius: 12px;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.search-input:focus {
    border-color: #087BFF !important;
    box-shadow: 0 0 16px rgba(8, 123, 255, 0.45) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #94A3B8 !important;
}

/* Table Dark Standard */
table, .table {
    background: transparent !important;
    color: #CBD5E1 !important;
    border-color: rgba(8, 123, 255, 0.16) !important;
}
th {
    background: rgba(14, 22, 68, 0.95) !important;
    color: #FFFFFF !important;
    border-color: rgba(8, 123, 255, 0.22) !important;
}
td {
    background: rgba(7, 11, 40, 0.65) !important;
    color: #CBD5E1 !important;
    border-color: rgba(8, 123, 255, 0.12) !important;
}

/* Breadcrumbs & Badges */
.breadcrumb, .breadcrumb-item {
    color: #94A3B8 !important;
}
.breadcrumb-item.active, .breadcrumb-item a:hover {
    color: #38BDF8 !important;
}
.badge, .tag, .pill {
    background: rgba(8, 123, 255, 0.16) !important;
    border: 1px solid rgba(8, 123, 255, 0.35) !important;
    color: #38BDF8 !important;
}

/* Elimination of orange accents across all links and hover states */
a:hover {
    color: #38BDF8;
}
.highlight-text, .brand-accent {
    color: #38BDF8 !important;
}