/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

:root {
    /* === TYPOGRAPHY === */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent: 'Space Grotesk', var(--font-body);

    /* Tracking (letter-spacing) */
    --tracking-tight: -0.02em;
    --tracking-tighter: -0.03em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;

    /* Line heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* === PRIMARY COLORS (Keep existing blue sphere) === */
    --color-primary: #0047AB;           /* Royal Blue - KEEP */
    --color-primary-dark: #003b8e;      /* KEEP */
    --color-primary-light: #3B82F6;     /* Brighter blue */
    --color-primary-pale: #E6F0FF;      /* Very light blue */
    --color-primary-ultra-pale: #F0F7FF; /* Almost white blue */

    /* Legacy aliases for compatibility */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --primary-light: var(--color-primary-pale);

    /* === NEUTRAL BACKGROUNDS (Light, modern) === */
    --color-white: #FFFFFF;
    --color-off-white: #FAFBFC;
    --color-light-gray: #F5F7FA;
    --color-lighter-gray: #F9FAFB;

    /* Legacy aliases */
    --white: var(--color-white);
    --light: var(--color-off-white);
    --light-gray: var(--color-light-gray);

    /* === ACCENT COLORS (Subtle, refined) === */
    /* Keep gold for Jewish cultural connection */
    --color-gold: #FFD700;
    --color-gold-light: #FFE44D;
    --color-gold-pale: #FFF9E6;

    /* Add teal as secondary accent (modern, fresh) */
    --color-teal: #14B8A6;
    --color-teal-light: #5EEAD4;
    --color-teal-pale: #E0F7F5;

    /* Legacy aliases */
    --accent: var(--color-gold);
    --secondary: var(--color-teal);
    --secondary-light: var(--color-teal-pale);

    /* === TEXT COLORS === */
    --color-text-primary: #1F2937;      /* Dark gray, not black */
    --color-text-secondary: #64748B;
    --color-text-tertiary: #94A3B8;

    /* Legacy aliases */
    --dark: var(--color-text-primary);
    --gray: var(--color-text-secondary);

    /* === SEMANTIC COLORS === */
    --color-success: #10B981;           /* Green */
    --color-warning: #F59E0B;           /* Amber */
    --color-error: #EF4444;             /* Red */

    /* Legacy aliases */
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-error);

    /* === SPACING === */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;

    /* === BORDER RADIUS === */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;

    /* === SHADOWS === */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.12);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

    /* === GLOW EFFECTS === */
    --glow-primary: 0 5px 15px rgba(0, 71, 171, 0.2);
    --glow-accent: 0 5px 15px rgba(255, 215, 0, 0.2);
    --glow-gold: 0 8px 24px rgba(255, 215, 0, 0.4);

    /* === DARK MODE COLORS === Modern & Vibrant */
    --dark-bg-primary: #0a0e1a;          /* Deep blue-black */
    --dark-bg-secondary: #151b2e;        /* Rich dark blue */
    --dark-bg-elevated: #1f2937;         /* Elevated surface */
    --dark-text-primary: #f0f4f8;        /* Crisp white */
    --dark-text-secondary: #b8c5d6;      /* Cool gray */
    --dark-text-tertiary: #8a99ac;       /* Muted gray */
    --dark-border: #2d3748;              /* Subtle border */
    --dark-primary: #5b9fff;             /* Vibrant blue */
    --dark-primary-light: #7db3ff;       /* Bright blue */
    --dark-accent: #ffc952;              /* Warm gold */
}

/* Dark mode styles - Modern & Vibrant */
body.dark-mode {
    --color-white: var(--dark-bg-secondary);
    --color-off-white: var(--dark-bg-primary);
    --color-light-gray: var(--dark-bg-elevated);
    --color-lighter-gray: var(--dark-bg-secondary);
    --color-text-primary: var(--dark-text-primary);
    --color-text-secondary: var(--dark-text-secondary);
    --color-text-tertiary: var(--dark-text-tertiary);
    --color-primary: var(--dark-primary);
    --color-primary-dark: var(--dark-primary-light);
    --color-primary-light: var(--dark-primary);
    --color-primary-pale: #1a3a5f;
    --color-gold: var(--dark-accent);
    --color-gold-light: #ffd670;
    --light-gray: var(--dark-border);

    background: linear-gradient(135deg, #0a0e1a 0%, #0f1419 50%, #0a0e1a 100%);
    color: var(--dark-text-primary);

    /* Modern shadows with colored glow */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(91, 159, 255, 0.05);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 40px rgba(91, 159, 255, 0.08);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 60px rgba(91, 159, 255, 0.1);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 80px rgba(91, 159, 255, 0.12);

    /* Vibrant glow effects */
    --glow-primary: 0 8px 24px rgba(91, 159, 255, 0.4), 0 0 48px rgba(91, 159, 255, 0.15);
    --glow-accent: 0 8px 24px rgba(255, 201, 82, 0.4), 0 0 48px rgba(255, 201, 82, 0.15);
    --glow-gold: 0 12px 32px rgba(255, 201, 82, 0.5), 0 0 64px rgba(255, 201, 82, 0.2);
}

/* Section titles in dark mode - make them pop */
body.dark-mode .section-title {
    color: var(--dark-text-primary);
    text-shadow: 0 2px 12px rgba(91, 159, 255, 0.3);
}

body.dark-mode .section-subtitle {
    color: var(--dark-text-secondary);
}

/* === TYPOGRAPHY === */
body {
    background-color: var(--light);
    color: var(--color-text-primary);
    line-height: var(--leading-relaxed);
    font-size: 16px;
    font-family: var(--font-body);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth transitions for dark mode */
body,
header,
nav,
.card,
.article-card,
.tool-card,
.path-node-content,
.hero,
footer {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Display headings use Fraunces for editorial feel */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
    margin-bottom: 0.75em;
    color: var(--color-text-primary);
}

/* Smaller headings stay with Inter */
h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-snug);
    margin-bottom: 0.5em;
    color: var(--color-text-primary);
}

h1 {
    font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.04em; /* Extra tight for impact */
    line-height: 1.05;
}

h2 {
    font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
    letter-spacing: var(--tracking-tight);
}

h3 {
    font-size: clamp(1.5rem, 3vw + 0.25rem, 2rem);
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: var(--primary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.text-white {
    color: var(--white);
}

.text-dark {
    color: var(--dark);
}

.text-gray {
    color: var(--gray);
}

.bg-primary {
    background-color: var(--primary);
}

.bg-light {
    background-color: var(--light);
}

.bg-white {
    background-color: var(--white);
}

.bg-primary-light {
    background-color: var(--primary-light);
}

.mt-1 {
    margin-top: var(--space-md);
}

.mt-2 {
    margin-top: var(--space-lg);
}

.mt-3 {
    margin-top: var(--space-xl);
}

.mt-4 {
    margin-top: var(--space-xxl);
}

.mb-1 {
    margin-bottom: var(--space-md);
}

.mb-2 {
    margin-bottom: var(--space-lg);
}

.mb-3 {
    margin-bottom: var(--space-xl);
}

.mb-4 {
    margin-bottom: var(--space-xxl);
}

.my-1 {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.my-2 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.my-3 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.my-4 {
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-xxl);
}

.py-1 {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.py-2 {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.py-3 {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.py-4 {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);
}

.rounded {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.shadow {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.hidden {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Honeypot field - hidden from users but visible to bots */
.honeypot-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Loading Skeleton Animations */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-heading {
    height: 2em;
    margin-bottom: 0.75em;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-lg);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Enhanced animation keyframes */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === MOBILE-FIRST RESPONSIVE === */
/* Touch targets and accessibility */
@media (max-width: 768px) {
    body {
        font-size: 16px; /* Maintain 16px on mobile, not smaller */
        line-height: 1.6;
    }

    .container {
        padding: 0 var(--space-lg);
    }

    /* Headings slightly adjusted for mobile, but still use clamp */
    h1 {
        letter-spacing: -0.03em; /* Slightly looser on mobile */
        line-height: 1.1;
    }

    h2 {
        letter-spacing: -0.02em;
    }

    /* Touch-friendly spacing (limit to nav/actions so inline links stay inline) */
    .nav-links a,
    .btn,
    .filter-btn,
    .read-more {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Prevent double-tap zoom */
    button, .btn, .filter-btn {
        touch-action: manipulation;
    }

    /* Better tap highlight */
    * {
        -webkit-tap-highlight-color: rgba(0, 71, 171, 0.2);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}