/* =====================================================
   DESIGN SYSTEM — TOKENS
   Color palette & fonts from brand spec
   Primary   #E31E24  |  Secondary  #1A1A1A
   Tertiary  #666666  |  Neutral    #F8F8F8
   Fonts: Work Sans (headline), Newsreader (body), Public Sans (label)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Public+Sans:wght@300;400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600&display=swap');

/* ── LIGHT MODE (default) ─────────────────────────── */
:root {
  /* Brand Palette */
  --primary:          #E31E24;
  --primary-dark:     #b01519;
  --primary-light:    #f05a5e;
  --primary-muted:    rgba(227, 30, 36, 0.08);
  --primary-glow:     rgba(227, 30, 36, 0.15);

  --secondary:        #1A1A1A;
  --secondary-soft:   #2e2e2e;

  --tertiary:         #666666;
  --tertiary-light:   #8a8a8a;

  --neutral:          #F8F8F8;
  --neutral-dark:     #e8e8e8;

  /* Background Scale - Beautiful Light Mode */
  --bg:               #fcfcfc;       /* softer off-white background */
  --bg-surface:       #ffffff;       /* stark white for cards */
  --bg-elevated:      #ffffff;
  --bg-glass:         rgba(255, 255, 255, 0.85);

  /* Text Scale */
  --text:             #1f1f1f;       /* softer black for better reading */
  --text-muted:       #5c5c5c;       /* clear but muted text */
  --text-subtle:      #8f8f8f;
  --text-inverse:     #ffffff;

  /* Border */
  --border:           #ebebeb;
  --border-strong:    #dcdcdc;

  /* Shadows (light, airy, premium) */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow:           0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg:        0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-primary:   0 8px 20px rgba(227, 30, 36, 0.15);

  /* Category Colors */
  --politics:         #2563eb;
  --sports:           #059669;
  --tech:             #7c3aed;
  --entertainment:    #db2777;
  --business:         #ea580c;
  --world:            #0d9488;

  /* Typography */
  --font-headline:    'Work Sans', sans-serif;
  --font-body:        'Newsreader', serif;
  --font-label:       'Public Sans', sans-serif;
  --font-hindi:       'Noto Sans Devanagari', sans-serif;

  /* Font Sizes */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Spacing Scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* Border Radius */
  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-round: 9999px;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── DARK MODE ────────────────────────────────────── */
[data-theme="dark"] {
  /* Background Scale */
  --bg:               #0f0f11;
  --bg-surface:       #18181b;
  --bg-elevated:      #27272a;
  --bg-glass:         rgba(15, 15, 17, 0.85);

  /* Text Scale */
  --text:             #fafafa;
  --text-muted:       #a1a1aa;
  --text-subtle:      #71717a;
  --text-inverse:     #0f0f11;

  /* Border */
  --border:           #27272a;
  --border-strong:    #3f3f46;

  /* Shadows (deeper, dramatic) */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow:           0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg:        0 16px 40px rgba(0, 0, 0, 0.8);
  --shadow-primary:   0 8px 24px rgba(227, 30, 36, 0.25);

  /* Brand — same primary, slightly brighter glow */
  --primary-muted:    rgba(227, 30, 36, 0.15);
  --primary-glow:     rgba(227, 30, 36, 0.30);
}