/* ========================================
    THEME SYSTEM: Global Variables & Tokens
    ======================================== */

:root {
    /* TYPOGRAPHY */
    --font-display: Georgia, 'Times New Roman', serif;
    --font-body: Georgia, 'Times New Roman', serif;
    --font-mono: Monaco, Menlo, 'Ubuntu Mono', 'Courier New', monospace;
    
    --type-base: clamp(1rem, 3.5vw, 1.25rem);
    --type-scale-ratio: 1.25;

    /* COLOR PALETTE: BASE */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;

    /* GRAYSCALE */
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #6c757d;
    --color-gray-600: #495057;
    --color-gray-700: #343a40;
    --color-gray-800: #212529;

    /* BRAND COLORS */
    --color-primary: #2c5f5a;               /* Brand Teal */
    --color-primary-rgb: 44, 95, 90;
    --color-secondary: #d4822a;             /* Brand Orange */
    --color-secondary-rgb: 212, 130, 42;
    --color-teal-dark: #1e4d48;
    --logo-teal: var(--color-primary);
    --logo-teal-dark: var(--color-teal-dark);
    --logo-orange: var(--color-secondary);

    /* CATEGORY COLORS */
    --color-category-ipo: #1e88e5;
    --color-category-earnings: #43a047;
    --color-category-policy: #fb8c00;
    --color-category-healthcare: #10b981;
    --color-category-legal: #2c5f5a;
    --color-category-political: #8b5cf6;
    --color-category-corrections: #e53935;
    --color-category-economic: #0d9488;
    --color-category-housing: #ca8a04;
    --color-category-journal: #7c3aed;
    --color-category-media: #e91e63;
    --color-category-prediction: #ff5722;
    --color-category-employment: #009688;
    --color-category-consumer: #4caf50;
    --color-category-government: #795548;
    --color-category-business: #607d8b;
    --color-category-trade: #9c27b0;

    /* PLATFORM COLORS */
    --color-youtube: #FF0000;
    --color-spotify: #1DB954;
    --color-apple: #000000;

    /* SEMANTIC COLORS */
    --color-success: #43a047;
    --color-error: #e53935;
    --color-warning: #fb8c00;

    /* THEME-SPECIFIC TOKENS (LIGHT MODE DEFAULT) */
    --text-primary: var(--color-black);
    --text-secondary: var(--color-gray-700);
    --text-muted: var(--color-gray-500);
    
    --bg-primary: #fdf6e8;
    --bg-primary-rgb: 253, 246, 232;
    --bg-secondary: #f8f4e6;
    --bg-secondary-rgb: 248, 244, 230;
    --bg-tertiary: #e9e2d0;

    --accent-primary: var(--color-primary);
    --accent-primary-rgb: var(--color-primary-rgb);
    --accent-secondary: var(--color-secondary);
    
    --border-color: #e8dcc0;
    --border-color-rgb: 232, 220, 192;
    --shadow-color: rgba(var(--color-primary-rgb), 0.1);
    --shadow-card: 0 1px 2px rgba(var(--color-black-rgb), 0.04), 0 8px 24px rgba(var(--color-primary-rgb), 0.07);
    --shadow-card-hover: 0 2px 4px rgba(var(--color-black-rgb), 0.05), 0 14px 34px rgba(var(--color-primary-rgb), 0.12);
    --focus-ring: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.18);

    /* SHAPE SYSTEM */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --card-radius: var(--radius-lg);
    --control-radius: var(--radius-md);
    
    /* SPACING SYSTEM */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1.25rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* LAYOUT TOKENS */
    --max-content-width: 1440px;
    --content-narrow: 980px;
    --content-standard: 1080px;
    --content-wide: 1200px;
    --content-padding: var(--spacing-md);
    --section-spacing: var(--spacing-xl);
    
    /* ANIMATION TOKENS */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Site header landmark */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5001;
  background: rgba(var(--bg-primary-rgb), 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--border-color-rgb), 0.75);
}

/* DARK MODE OVERRIDES */
@media (prefers-color-scheme: dark) {
    html:not(.theme-init) {
        --text-primary: #f5f7f8;
        --text-secondary: #dfe6ea;
        --text-muted: #a2adb9;
        
        --bg-primary: #11181d;
        --bg-secondary: #171f27;
        --bg-tertiary: #1f2a32;
        
        --accent-primary: #ffffff;
        --accent-primary-rgb: 255, 255, 255;
        --accent-secondary: #d4822a;
        
        --border-color: #2f3941;
        --border-color-rgb: 47, 57, 65;
        --shadow-color: rgba(0, 0, 0, 0.38);
        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 30px rgba(0, 0, 0, 0.28);
        --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.24), 0 16px 38px rgba(0, 0, 0, 0.32);
        
        --color-apple: #ffffff;
    }
}

/* Force dark mode via class */
html.dark-mode {
    --text-primary: #f5f7f8;
    --text-secondary: #dfe6ea;
    --text-muted: #a2adb9;
    
    --bg-primary: #11181d;
    --bg-secondary: #171f27;
    --bg-tertiary: #1f2a32;
    
    --accent-primary: #ffffff;
    --accent-primary-rgb: 255, 255, 255;
    --accent-secondary: #d4822a;
    
    --border-color: #2f3941;
    --border-color-rgb: 47, 57, 65;
    --shadow-color: rgba(0, 0, 0, 0.38);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 30px rgba(0, 0, 0, 0.28);
    --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.24), 0 16px 38px rgba(0, 0, 0, 0.32);
    
    --color-apple: #ffffff;
}

html.dark-mode .site-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

/* ========================================
   GLOBAL UI PATTERNS
   ======================================== */

/* Skeleton Loading */
.skeleton {
    background: var(--bg-secondary);
    background: linear-gradient(110deg, var(--bg-secondary) 8%, var(--bg-tertiary) 18%, var(--bg-secondary) 33%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear;
}

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

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}