/**
 * AI WORLD NEWS — Design System & CSS Variables
 * ========================================================================== */

/* ==========================================================================
   1. COLOR PALETTE — Dark-First Editorial Theme
   ========================================================================== */

:root {
  /* Primary Backgrounds (Dark Neutrals) */
  --bg-primary: #0a0a0b;          /* Near-black main background */
  --bg-secondary: #0f0f11;        /* Secondary surfaces */
  --bg-tertiary: #141417;         /* Cards, modals */
  --bg-hover: #1a1a1e;            /* Hover states */
  --bg-active: #202024;           /* Active states */

  /* Text Colors */
  --text-primary: #f8f8fa;        /* Primary text (near-white) */
  --text-secondary: #b8b8be;      /* Secondary text */
  --text-tertiary: #6e6e73;       /* Tertiary/muted text */
  --text-inverse: #0a0a0b;        /* Inverse text for light backgrounds */

  /* Accent Colors (AI-themed) */
  --accent-primary: #6366f1;      /* Indigo - Primary AI accent */
  --accent-secondary: #8b5cf6;    /* Violet - Secondary accent */
  --accent-tertiary: #06b6d4;     /* Cyan - Highlights */
  
  /* Status Colors */
  --success: #10b981;             /* Green - Success states */
  --warning: #f59e0b;             /* Amber - Warnings */
  --error: #ef4444;               /* Red - Errors */
  --info: #3b82f6;                /* Blue - Info */

  /* Border Colors */
  --border-primary: #27272a;      /* Primary borders */
  --border-secondary: #3f3f46;    /* Secondary borders */
  --border-inverse: #e4e4e7;      /* Inverse borders */

  /* Functional Colors */
  --link: #818cf8;                /* Links */
  --link-hover: #a5b4fc;          /* Link hover */
  --focus-ring: #6366f1;          /* Focus indicator */
}

/* ==========================================================================
   2. TYPOGRAPHY — Editorial-First System
   ========================================================================== */

:root {
  /* Font Families */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Merriweather', Georgia, Cambria, 'Times New Roman', Times, serif;

  /* Font Sizes (Fluid Scale) */
  --text-xs: 0.75rem;             /* 12px */
  --text-sm: 0.875rem;            /* 14px */
  --text-base: 1rem;              /* 16px */
  --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 */

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

  /* Line Heights */
  --leading-tight: 1.1;           /* Headings */
  --leading-snug: 1.25;           /* Subheadings */
  --leading-normal: 1.5;          /* Body text */
  --leading-relaxed: 1.75;        /* Long-form content */

  /* Letter Spacing */
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
}

/* ==========================================================================
   3. SPACING SYSTEM — 8px Grid
   ========================================================================== */

:root {
  --space-0: 0;
  --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 */

  /* ==========================================================================
     4. GRID SYSTEM — Editorial Layout
     ========================================================================== */
  
  --grid-gap-xs: 1.5rem;          /* 24px - Tight lists */
  --grid-gap-sm: 2rem;            /* 32px - Card rows */
  --grid-gap-md: 3rem;            /* 48px - Section gaps */
  --grid-gap-lg: 4rem;            /* 64px - Major sections */
  --grid-gap-xl: 6rem;            /* 96px - Hero spacing */

  /* ==========================================================================
     5. CONTAINER WIDTHS — Responsive Breakpoints
     ========================================================================== */
  
  --container-xs: 20rem;          /* 320px - Mobile narrow */
  --container-sm: 24rem;          /* 384px - Mobile standard */
  --container-md: 28rem;          /* 448px - Tablet portrait */
  --container-lg: 36rem;          /* 576px - Tablet landscape */
  --container-xl: 48rem;          /* 768px - Small desktop */
  --container-2xl: 64rem;         /* 1024px - Desktop */
  --container-3xl: 80rem;         /* 1280px - Large desktop */
  --container-4xl: 96rem;         /* 1536px - Extra large */

  /* ==========================================================================
     6. BORDERS & RADIUS
     ========================================================================== */
  
  --border-radius-sm: 0.25rem;    /* 4px - Small inputs */
  --border-radius-md: 0.5rem;     /* 8px - Cards, buttons */
  --border-radius-lg: 1rem;       /* 16px - Modals */
  --border-radius-xl: 1.5rem;     /* 24px - Hero cards */
  --border-radius-2xl: 2rem;      /* 32px - Rounded containers */
  --border-radius-full: 9999px;   /* Circle */

  /* ==========================================================================
     7. SHADOWS — Layered & Subtle
     ========================================================================== */
  
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.25);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.15);

  /* ==========================================================================
     8. TRANSITIONS — Smooth & Controlled
     ========================================================================== */
  
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 350ms ease-out;
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     9. Z-INDEX SCALE
     ========================================================================== */
  
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ==========================================================================
     10. BREAKPOINTS — Mobile-First Approach
     ========================================================================== */
  
  --breakpoint-sm: 375px;         /* iPhone SE portrait */
  --breakpoint-md: 480px;         /* iPhone Mini landscape */
  --breakpoint-lg: 768px;         /* iPad portrait */
  --breakpoint-xl: 1024px;        /* iPad landscape */
  --breakpoint-2xl: 1280px;       /* Desktop standard */

  /* ==========================================================================
     11. ACCESSIBILITY — Reduced Motion & Contrast
     ========================================================================== */
  
  --focus-width: 3px;
  --focus-offset: -1px;
  --min-contrast-ratio: 4.5;      /* WCAG AA standard */

  /* Focus Ring (Accessible) */
  --focus-ring: var(--focus-width) solid var(--focus-ring);
}