/* ==========================================================================
   URUNVERI.COM - MODERN EDITORIAL & NATURAL TECH THEME LAYER
   Eliminates artificial AI/toy look; introduces authoritative editorial typography,
   calibrated slate/ink palettes, and tactile hardware precision.
   Preserves all underlying style.css rules while overriding variables & typography.
   ========================================================================== */

:root {
    /* 1. Natural Typography Stacks */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* 2. Natural & Calm Color Architecture (Light Mode) */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-surface: #f1f5f9;
    --bg-glass: rgba(255, 255, 255, 0.94);
    --bg-glass-border: rgba(15, 23, 42, 0.08);
    --border-color: rgba(15, 23, 42, 0.08);

    /* Rich Editorial Inks */
    --text-primary: #0f172a;    /* Deep slate ink */
    --text-secondary: #334155;  /* Balanced body charcoal */
    --text-muted: #64748b;      /* Elegant sub-caption */
    --text-inverse: #ffffff;

    /* Authoritative Accent Harmony */
    --accent-primary: #2563eb;   /* Cobalt / Deep Tech Blue */
    --accent-secondary: #0d9488; /* Deep Spruce Teal */
    --accent-success: #059669;   /* Organic Forest Emerald */
    --accent-warning: #d97706;   /* Warm Editorial Amber */
    --accent-danger: #e11d48;    /* Softer Rose-Crimson */
    --accent-info: #0284c7;      /* Clean Azure */
    --accent-glow: rgba(37, 99, 235, 0.12);

    /* Restrained Gradients (Organic & Subtle) */
    --gradient-primary: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    --gradient-subtle: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    --gradient-hero: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.05) 0%, rgba(248, 250, 252, 0) 70%);

    /* Tactile Physical Shadows (No Artificial Floats) */
    --glass-blur: 16px;
    --glass-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.02);
    --card-shadow-hover: 0 10px 28px -4px rgba(15, 23, 42, 0.08), 0 2px 8px -2px rgba(15, 23, 42, 0.03);
}

[data-theme='dark'] {
    /* Natural Dark Atmosphere (Obsidian Slate) */
    --bg-primary: #090d16;
    --bg-secondary: #0f1523;
    --bg-card: #111827;
    --bg-surface: #1e293b;
    --bg-glass: rgba(15, 21, 35, 0.90);
    --bg-glass-border: rgba(255, 255, 255, 0.07);
    --border-color: rgba(255, 255, 255, 0.08);

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --accent-primary: #3b82f6;
    --accent-secondary: #14b8a6;
    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-danger: #f43f5e;
    --accent-glow: rgba(59, 130, 246, 0.2);

    --gradient-hero: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.12) 0%, rgba(9, 13, 22, 0) 75%);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    --card-shadow-hover: 0 16px 40px -8px rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & RENDERING OPTIMIZATIONS
   ========================================================================== */

body {
    font-family: var(--font-sans) !important;
    color: var(--text-secondary);
    background-color: var(--bg-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.011em;
}

/* Headings: Authoritative Editorial Polish */
h1, h2, h3, h4, h5, h6,
.product-title,
.hero-title,
.page-title,
.section-title,
.category-card-title,
.brand-title {
    font-family: var(--font-heading) !important;
    color: var(--text-primary) !important;
    font-weight: 700;
    letter-spacing: -0.028em !important;
    line-height: 1.25;
}

h1, .hero-title {
    font-weight: 800;
    letter-spacing: -0.035em !important;
}

/* Editorial Body & Longform Reviews */
.editorial-lead-box,
.editorial-scorecard-card,
#info-tab-desc p,
.product-detail-description,
.review-text {
    font-family: var(--font-sans);
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--text-secondary);
}

#info-tab-desc strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Precision Hardware Monospace for Numbers, Specs & Benchmarks */
.spec-value,
.spec-tag,
.hardware-metric,
.benchmark-num,
[data-score],
.tech-mono,
code, kbd, samp {
    font-family: var(--font-mono) !important;
    font-feature-settings: "tnum" 1, "zero" 1;
    letter-spacing: -0.02em;
}

/* ==========================================================================
   CARDS, BUTTONS & INTERACTION ENHANCEMENTS
   ========================================================================== */

.card,
.product-card,
.editorial-scorecard-card,
.filter-sidebar,
.search-container {
    border-color: var(--border-color) !important;
    box-shadow: var(--glass-shadow);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.2s ease !important;
}

.card:hover,
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover) !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
}

/* Modern Pill Badges */
.badge,
.pill,
.filter-chip {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Editorial Scorecard Enhancements */
.editorial-scorecard-card {
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
}

.editorial-scorecard-card h3 {
    font-family: var(--font-heading) !important;
    letter-spacing: -0.02em !important;
}

/* Header & Search Bar */
.site-header {
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    background: var(--bg-glass) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.header-search input,
.search-input {
    font-family: var(--font-sans);
    font-size: 0.95rem;
}