/* ============================================================================ */
/* variables.css - DESIGN SYSTEM TOKENS */
/* ============================================================================ */
/* Description: Centralized design tokens with consistent organization */
/* Version: 3.0 - Reorganized and cleaned up variables */
/* Author: Mike */
/* Last Updated: September 23, 2025 */
/* ============================================================================ */

:root {
  /* ========================================================================== */
  /* COLOR SYSTEM - Theme and semantic colors */
  /* ========================================================================== */

  /* Dark Mode (Default) */
  /* Critical colors with HEX fallbacks for Android compatibility */
  --accent-color: #ffd700;
  --accent-color: hsl(51, 100%, 50%); /* Brand color, CTAs, highlights */

  --accent-dimmed: #b8860b;
  --accent-dimmed: hsl(51, 100%, 35%); /* Dimmed accent for navigation */

  --accent-bright: #ffd700;
  --accent-bright: hsl(51, 100%, 50%); /* Bright accent for active states */

  /* All other colors use HSL only */
  --background: hsl(220, 39%, 6%); /* Page background */
  --background-quote: hsl(220, 39%, 1%);
  --surface: hsl(200, 7%, 18%); /* Card backgrounds, panels */
  --text-primary: hsl(240, 5%, 92%); /* Slightly brighter for body text */
  --text-secondary: hsl(240, 4%, 75%); /* Less bright for headings */
  --text-muted: hsla(0, 0%, 100%, 0.6); /* Muted text, placeholders */
  --text-background: hsl(240, 4%, 45%); /* Background-like text - very subtle */
  --icon-grey: hsl(0, 0%, 71%); /* Icons, decorative elements */
  --white: hsl(0, 0%, 100%); /* Pure white for contrast */

  /* Light Mode */
  --light-background: hsl(0, 0%, 86%); /* Light page background */
  --light-surface: hsl(0, 0%, 100%); /* Light card backgrounds */
  --light-text-primary: hsl(0, 0%, 13%); /* Light main text */
  --light-text-secondary: hsla(0, 0%, 13%, 0.8); /* Light secondary text */
  --light-text-muted: hsla(0, 0%, 13%, 0.6); /* Light muted text */

  /* Animation Colors */
  --flash-primary: #8a2be2; /* Purple - for tag explosions (pyramid climb) */
  --flash-secondary: #ffff00; /* Yellow - for tag explosions (pyramid climb) */
  --random-flash-primary: hsl(
    210,
    90%,
    70%
  ); /* Bright blue - random button base */
  --random-flash-secondary: hsl(
    210,
    100%,
    85%
  ); /* Lighter blue - random button accent */

  /* Component Colors */
  --color-category-label: var(
    --text-background
  ); /* Category labels blend into background */

  /* Glass Effect */
  --glass-bg: hsla(200, 7%, 18%, 0.3); /* Translucent surface overlay */
  --glass-bg-desktop: hsla(200, 7%, 18%, 0.09);
  --glass-bg-light: hsla(0, 0%, 100%, 0.7); /* Light mode glass overlay */
  --glass-border: hsla(0, 0%, 100%, 0.2); /* Glass border effect */
  --glass-blur: 15px; /* Backdrop blur amount */

  /* Fake glass (no blur, just visual) */
  --fake-glass-bg: hsla(0, 0%, 0%, 0.75);
  --fake-glass-border: hsla(0, 0%, 100%, 0.25);

  /* Status Colors */
  --success: hsl(142, 100%, 50%); /* Success states */
  --warning: hsl(45, 93%, 47%); /* Warning states */
  --error: hsl(354, 70%, 54%); /* Error states */
  --info: hsl(195, 93%, 50%); /* Info states */

  /* Category Colors */
  --color-health: hsl(120, 100%, 50%); /* Health articles - bright green */
  --color-coins: hsl(51, 100%, 50%); /* Crypto/finance - gold yellow */
  --color-hack: hsl(300, 100%, 25%); /* Tech/hacking - deep purple */
  --color-ai: hsl(30, 100%, 50%); /* AI content - vibrant orange */
  --color-random: hsl(330, 100%, 50%); /* Random content - hot pink */

  /* ========================================================================== */
  /* TYPOGRAPHY SYSTEM - Fonts, sizes, and spacing */
  /* ========================================================================== */

  /* Font Families */
  --font-primary: "Exo", sans-serif;
  --font-display: "Orbitron", sans-serif; /* Headlines, article titles, hero text */
  --font-script: "Shadows Into Light", cursive; /* Decorative text, quotes */

  /* Font Weights */
  --font-weight-light: 300; /* Light text for subtle elements */
  --font-weight-normal: 400; /* Body text, default weight */
  --font-weight-medium: 500; /* Medium weight for headings */
  --font-weight-semibold: 600; /* Section headings, emphasis */
  --font-weight-black: 900; /* Headlines, strong emphasis */

  /* Base Font Scale */
  --font-size-xs: 0.75rem; /* 12px - Small labels, timestamps, metadata */
  --font-size-sm: 0.875rem; /* 14px - Navigation links, category tags */
  --font-size-base: 1rem; /* 16px - Body text, article content */
  --font-size-lg: 1.125rem; /* 18px - Card titles, section headings */
  --font-size-xl: 1.25rem; /* 20px - Article subtitles, large card titles */
  --font-size-2xl: 1.5rem; /* 24px - Page headings, article titles */
  --font-size-3xl: 1.875rem; /* 30px - Main headlines, hero titles */
  --font-size-4xl: 2.25rem; /* 36px - Large hero text, landing page titles */

  /* Component-Specific Font Sizes */
  --font-size-nav: 0.6rem; /* Navigation menu items */
  --font-size-category-label: 1.25rem; /* Category labels and badges */
  --font-size-card-meta: 0.75rem; /* Article card metadata */
  --font-size-huge-title: clamp(
    1rem,
    2.5vw,
    1.4rem
  ); /* Responsive huge card titles */
  --font-size-small-title: clamp(
    0.875rem,
    2vw,
    1.125rem
  ); /* Responsive small card titles */

  /* Line Heights */
  --line-height-tight: 1.2; /* Headlines, titles that need compact spacing */
  --line-height-normal: 1.5; /* Body text, default readable spacing */
  --line-height-relaxed: 1.6; /* Long-form content, articles */
  --line-height-loose: 2; /* Special emphasis, quotes */

  /* ========================================================================== */
  /* LETTER SPACING SYSTEM - Consistent character spacing */
  /* ========================================================================== */

  /* Letter spacing scale */
  --letter-spacing-tightest: -0.05em; /* Extra tight for large display text */
  --letter-spacing-tight: -0.025em; /* Tight for headings */
  --letter-spacing-normal: 0; /* Default, no adjustment */
  --letter-spacing-wide: 0.025em; /* Slightly open for small text */
  --letter-spacing-wider: 0.05em; /* Open for very small text */
  --letter-spacing-widest: 0.1em; /* Very open for all-caps text */

  /* Semantic spacing tokens */
  --letter-spacing-display: var(
    --letter-spacing-tightest
  ); /* Hero titles, large display */
  --letter-spacing-heading: var(
    --letter-spacing-tight
  ); /* H1, H2, H3 headings */
  --letter-spacing-body: var(--letter-spacing-normal); /* Body text, articles */
  --letter-spacing-small: var(--letter-spacing-wide); /* Small text, captions */
  --letter-spacing-tiny: var(
    --letter-spacing-wider
  ); /* Very small text, metadata */
  --letter-spacing-caps: var(--letter-spacing-widest); /* ALL CAPS text */

  /* ========================================================================== */
  /* SPACING SYSTEM - 8-Point Grid */
  /* ========================================================================== */

  /* Base unit: 8px - Industry standard for scalability */
  --spacing-base: 0.5rem; /* 8px base unit */

  /* Core spacing scale */
  --spacing-0: 0; /* No spacing */
  --spacing-1: 0.25rem; /* 4px - Fine details */
  --spacing-2: var(--spacing-base); /* 8px - Base unit */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px - Default rem */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;

  /* Semantic Spacing */
  --spacing-page: var(--spacing-16); /* Between page sections */
  --spacing-section: var(--spacing-20); /* Between major content sections */
  --spacing-component: var(--spacing-6); /* Between components/cards */
  --spacing-element: var(--spacing-4); /* Between related elements */
  --spacing-tight: var(--spacing-2); /* Within components */
  --spacing-compact: var(--spacing-1); /* Between closely related items */

  /* Article-specific gaps */
  --spacing-article-gap-mobile: var(--spacing-2); /* Mobile article spacing */
  --spacing-article-gap-tablet: var(--spacing-3); /* Tablet article spacing */
  --spacing-article-gap-desktop: var(--spacing-4); /* Desktop article spacing */
  --spacing-side-cards: var(--spacing-1); /* Minimal spacing for side cards */
  --spacing-category-section: var(--spacing-3); /* Category section spacing */

  /* ========================================================================== */
  /* LAYOUT DIMENSIONS - Container and component sizes */
  /* ========================================================================== */

  /* Container widths */
  --container-sm: 640px; /* Small screens, mobile landscape */
  --container-md: 768px; /* Tablets, medium screens */
  --container-lg: 1024px; /* Desktop, large screens */
  --container-xl: 1200px; /* Large desktop, main content max-width */
  --container-2xl: 1400px; /* Extra large screens, wide layouts */

  /* Component heights */
  --nav-height: 60px; /* Mobile navigation bar height */
  --header-height: 80px; /* Site header height */
  --card-height-small: 200px; /* Small article cards */
  --card-height-medium: 300px; /* Medium article cards */
  --card-height-large: 400px; /* Large hero cards */

  /* ========================================================================== */
  /* BORDER RADIUS - Modern rounded corners */
  /* ========================================================================== */

  --radius-none: 0; /* Sharp corners */
  --radius-xs: 0.125rem; /* 2px - Subtle rounding */
  --radius-sm: 0.25rem; /* 4px - Tags, small buttons */
  --radius-md: 0.5rem; /* 8px - Cards, form inputs */
  --radius-lg: 0.75rem; /* 12px - Article cards, main UI elements */
  --radius-xl: 1rem; /* 16px - Large containers, modals */
  --radius-2xl: 1.5rem; /* 24px - Hero sections, feature cards */
  --radius-full: 9999px; /* Perfect circles, pills */

  /* ========================================================================== */
  /* ELEVATION SYSTEM - Modern shadows for depth */
  /* ========================================================================== */

  --shadow-xs: 0 1px 2px 0 hsla(220, 43%, 11%, 0.03); /* Minimal shadow */
  --shadow-sm: 0 1px 3px 0 hsla(220, 43%, 11%, 0.08),
    0 1px 2px -1px hsla(220, 43%, 11%, 0.08); /* Small elements */
  --shadow-md: 0 4px 6px -1px hsla(220, 43%, 11%, 0.08),
    0 2px 4px -2px hsla(220, 43%, 11%, 0.08); /* Cards, dropdowns */
  --shadow-lg: 0 10px 15px -3px hsla(220, 43%, 11%, 0.08),
    0 4px 6px -4px hsla(220, 43%, 11%, 0.08); /* Modals, overlays */
  --shadow-xl: 0 20px 25px -5px hsla(220, 43%, 11%, 0.08),
    0 8px 10px -6px hsla(220, 43%, 11%, 0.08); /* Large modals */
  --shadow-2xl: 0 25px 50px -12px hsla(220, 43%, 11%, 0.2); /* Dramatic elevation */
  --shadow-glow: 0 0 0 1px var(--accent-color),
    0 0 16px hsla(51, 100%, 50%, 0.5); /* Brand accent glow */

  /* ========================================================================== */
  /* Z-INDEX SCALE - Layered interface organization */
  /* ========================================================================== */

  --z-hide: -1; /* Hidden behind content */
  --z-auto: auto; /* Browser default stacking */
  --z-base: 0; /* Base content layer */
  --z-docked: 10; /* Docked elements, sticky content */
  --z-dropdown: 1000; /* Dropdown menus */
  --z-sticky: 1100; /* Sticky headers, navigation */
  --z-banner: 1200; /* Notification banners */
  --z-overlay: 1300; /* Modal overlays, backdrops */
  --z-modal: 1400; /* Modal content */
  --z-popover: 1500; /* Popovers, context menus */
  --z-skip-link: 1600; /* Accessibility skip links */
  --z-toast: 1700; /* Toast notifications */
  --z-tooltip: 1800; /* Tooltips, highest priority UI */

  /* ========================================================================== */
  /* ANIMATION SYSTEM - Smooth, purposeful motion */
  /* ========================================================================== */

  /* Duration scale */
  --duration-75: 75ms; /* Micro interactions */
  --duration-100: 100ms; /* Quick hover states */
  --duration-150: 150ms; /* Fast transitions */
  --duration-200: 200ms; /* Standard UI transitions */
  --duration-300: 300ms; /* Moderate animations */
  --duration-500: 500ms; /* Slower, more dramatic */
  --duration-700: 700ms; /* Content transitions */
  --duration-1000: 1000ms; /* Loading states, major changes */

  /* Easing functions */
  --ease-linear: linear; /* Constant speed */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Slow start */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Slow end */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Slow start and end */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce back */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Spring effect */

  /* Semantic transitions */
  --transition-fast: var(--duration-150) var(--ease-out); /* Quick feedback */
  --transition-base: var(--duration-200) var(--ease-out); /* Standard transitions */
  --transition-slow: var(--duration-300) var(--ease-out); /* Deliberate changes */
  --transition-colors: color var(--duration-150) var(--ease-in-out),
    background-color var(--duration-150) var(--ease-in-out),
    border-color var(--duration-150) var(--ease-in-out); /* Color changes */

  /* ========================================================================== */
  /* RESPONSIVE BREAKPOINTS - Mobile-first design system */
  /* ========================================================================== */

  --breakpoint-sm: 640px; /* Small devices, large phones */
  --breakpoint-md: 768px; /* Medium devices, tablets */
  --breakpoint-lg: 1024px; /* Large devices, small desktops */
  --breakpoint-xl: 1280px; /* Extra large devices */
  --breakpoint-2xl: 1536px; /* Ultra wide screens */

  /* ========================================================================== */
  /* ACCESSIBILITY & MODERN FEATURES */
  /* ========================================================================== */

  /* Focus states */
  --focus-ring: 0 0 0 2px var(--accent-color); /* Basic focus ring */
  --focus-ring-offset: 0 0 0 2px var(--background),
    0 0 0 4px var(--accent-color); /* Offset focus ring */

  /* Motion preferences */
  --motion-reduce: no-preference; /* Motion preference detection */

  /* Color scheme support */
  color-scheme: dark light; /* Browser theme integration */
}