/* ===========================================
   DESIGN TOKENS - EDITORIAL SPACE THEME
   Scientific American meets Kinfolk aesthetic
   =========================================== */

:root {
   /* ===========================================
     COLOR SYSTEM - Restrained & Sophisticated
     =========================================== */

   /* Primary Palette */
   --color-navy: #0A1628;
   --color-charcoal: #1E2936;
   --color-slate: #334155;
   --color-warm-white: #FDFBF7;
   --color-cream: #F8F5F1;
   --color-beige: #F4E8D8;

   /* Accent Colors (Used Sparingly) */
   --color-burnt-orange: #E76F51;
   --color-burnt-orange-dark: #D45A3D;
   --color-teal: #2A9D8F;
   --color-teal-dark: #238377;

   /* Neutrals */
   --color-gray-100: #F1F5F9;
   --color-gray-200: #E2E8F0;
   --color-gray-300: #CBD5E1;
   --color-gray-400: #94A3B8;
   --color-gray-500: #64748B;
   --color-gray-600: #475569;
   --color-gray-700: #334155;
   --color-gray-800: #1E293B;
   --color-gray-900: #0F172A;

   /* Semantic Colors */
   --color-text-primary: var(--color-charcoal);
   --color-text-secondary: var(--color-gray-600);
   --color-text-muted: var(--color-gray-400);
   --color-text-light: var(--color-warm-white);

   --color-bg-primary: var(--color-warm-white);
   --color-bg-secondary: var(--color-cream);
   --color-bg-tertiary: var(--color-beige);

   --color-border: var(--color-gray-200);
   --color-border-subtle: var(--color-gray-100);

   --color-accent-primary: var(--color-burnt-orange);
   --color-accent-secondary: var(--color-teal);

   /* ===========================================
     TYPOGRAPHY - Editorial Style
     =========================================== */

   /* Font Families */
   --font-display: 'Playfair Display', Georgia, serif;
   --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

   /* Font Sizes - Dramatic Scale */
   --text-xs: 0.75rem;
   /* 12px */
   --text-sm: 0.875rem;
   /* 14px */
   --text-base: 1.0625rem;
   /* 17px - comfortable reading */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.25rem;
   /* 20px */
   --text-2xl: 1.5rem;
   /* 24px */
   --text-3xl: 1.875rem;
   /* 30px */
   --text-4xl: 2.25rem;
   /* 36px */
   --text-5xl: 3rem;
   /* 48px */
   --text-6xl: 3.75rem;
   /* 60px */
   --text-hero: 4.5rem;
   /* 72px */

   /* Font Weights */
   --font-light: 300;
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;
   --font-extrabold: 800;

   /* Line Heights */
   --leading-none: 1;
   --leading-tight: 1.15;
   --leading-snug: 1.3;
   --leading-normal: 1.6;
   --leading-relaxed: 1.75;

   /* Letter Spacing */
   --tracking-tighter: -0.03em;
   --tracking-tight: -0.01em;
   --tracking-normal: 0;
   --tracking-wide: 0.025em;
   --tracking-wider: 0.05em;
   --tracking-widest: 0.1em;

   /* ===========================================
     SPACING
     =========================================== */

   --space-1: 0.25rem;
   /* 4px */
   --space-2: 0.5rem;
   /* 8px */
   --space-3: 0.75rem;
   /* 12px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.25rem;
   /* 20px */
   --space-6: 1.5rem;
   /* 24px */
   --space-8: 2rem;
   /* 32px */
   --space-10: 2.5rem;
   /* 40px */
   --space-12: 3rem;
   /* 48px */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */
   --space-24: 6rem;
   /* 96px */
   --space-32: 8rem;
   /* 128px */

   /* ===========================================
     LAYOUT
     =========================================== */

   --container-sm: 640px;
   --container-md: 768px;
   --container-lg: 1024px;
   --container-xl: 1200px;
   --container-2xl: 1400px;

   /* ===========================================
     BORDERS & RADIUS
     =========================================== */

   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 8px;
   --radius-xl: 12px;
   --radius-2xl: 16px;
   --radius-full: 9999px;

   /* ===========================================
     SHADOWS - Subtle, Not Glowy
     =========================================== */

   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
   --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.1);
   --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);

   /* ===========================================
     TRANSITIONS - Quick & Subtle
     =========================================== */

   --transition-fast: 150ms ease;
   --transition-base: 200ms ease;
   --transition-slow: 300ms ease;

   /* ===========================================
     Z-INDEX
     =========================================== */

   --z-base: 0;
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-fixed: 300;
   --z-modal-backdrop: 400;
   --z-modal: 500;
   --z-tooltip: 600;

   /* ===========================================
     HEADER
     =========================================== */

   --header-height: 72px;
   --header-bg: rgba(253, 251, 247, 0.95);
}

/* ===========================================
   DARK MODE
   =========================================== */

[data-theme="dark"] {
   --color-text-primary: var(--color-gray-100);
   --color-text-secondary: var(--color-gray-300);
   --color-text-muted: var(--color-gray-500);

   --color-bg-primary: var(--color-navy);
   --color-bg-secondary: var(--color-charcoal);
   --color-bg-tertiary: var(--color-slate);

   --color-border: var(--color-gray-700);
   --color-border-subtle: var(--color-gray-800);

   --header-bg: rgba(10, 22, 40, 0.95);

   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
   --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
   --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.5);
   --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   LIGHT MODE
   =========================================== */

[data-theme="light"] {
   --color-text-primary: var(--color-charcoal);
   --color-text-secondary: var(--color-gray-600);
   --color-text-muted: var(--color-gray-400);

   --color-bg-primary: var(--color-warm-white);
   --color-bg-secondary: var(--color-cream);
   --color-bg-tertiary: var(--color-beige);

   --color-border: var(--color-gray-200);
   --color-border-subtle: var(--color-gray-100);

   --header-bg: rgba(253, 251, 247, 0.95);

   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
   --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.1);
   --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* ===========================================
   DARK MODE SEARCH INPUT FIX - HARDCODED COLORS
   This uses direct hex values to override browser defaults
   =========================================== */

[data-theme="dark"] input[type="search"],
[data-theme="dark"] .header-search input[type="search"],
[data-theme="dark"] .header-search input {
   background: #334155 !important;
   background-color: #334155 !important;
   color: #F1F5F9 !important;
   -webkit-text-fill-color: #F1F5F9 !important;
   border: 1px solid #334155 !important;
   caret-color: #F1F5F9 !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   appearance: none !important;
}

[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] .header-search input[type="search"]:focus,
[data-theme="dark"] .header-search input:focus {
   background: #1E2936 !important;
   background-color: #1E2936 !important;
   color: #F1F5F9 !important;
   -webkit-text-fill-color: #F1F5F9 !important;
   border-color: #2A9D8F !important;
   outline: none !important;
}

[data-theme="dark"] input[type="search"]::placeholder,
[data-theme="dark"] .header-search input::placeholder {
   color: #64748B !important;
   -webkit-text-fill-color: #64748B !important;
   opacity: 1 !important;
}

[data-theme="dark"] input[type="search"]:-webkit-autofill,
[data-theme="dark"] input[type="search"]:-webkit-autofill:hover,
[data-theme="dark"] input[type="search"]:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0 1000px #334155 inset !important;
   -webkit-text-fill-color: #F1F5F9 !important;
   caret-color: #F1F5F9 !important;
}