/*
 * app/static/css/tokens.css
 *
 * Design tokens for Toofan Express News.
 *
 * THIS IS THE SINGLE SOURCE OF TRUTH for all visual design values.
 * Every other CSS file must reference only var(--token-name) — no
 * hardcoded colors, font-family names, or spacing values anywhere else.
 *
 * Categories:
 *   1. Google Fonts import
 *   2. Color palette
 *   3. Typography (families, sizes, line-heights, weights)
 *   4. Spacing (4 px base scale)
 *   5. Layout
 *   6. Effects (radii, shadows, transitions, z-indices)
 */

/* =========================================================================
   1. Google Fonts — Playfair Display + Source Serif 4 + Inter
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Source+Serif+4:wght@300;400;600&family=Inter:wght@300;400;500;600;700&display=swap');


/* =========================================================================
   2. Color Palette
   ========================================================================= */

:root {
  /* Brand primaries — bold news red (CNN/NDTV style) */
  --color-primary:            #d40000;
  --color-primary-dark:       #a30000;
  --color-primary-light:      #ff1a1a;

  /* Secondary — deep navy */
  --color-secondary:          #1a1a2e;

  /* Accent — editorial gold */
  --color-accent:             #e8a020;

  /* Surface & background */
  --color-surface:            #ffffff;
  --color-surface-alt:        #f5f5f5;
  --color-surface-dark:       #111827;

  /* Text */
  --color-text:               #111827;
  --color-text-muted:         #6b7280;
  --color-text-inverse:       #ffffff;

  /* Borders */
  --color-border:             #e5e7eb;
  --color-border-dark:        #374151;

  /* Overlay */
  --color-overlay:            rgba(0, 0, 0, 0.5);

  /* Breaking-news ticker */
  --color-ticker-bg:          #d40000;
  --color-ticker-text:        #ffffff;

  /* Category tag */
  --color-category-tag:       #d40000;

  /* Card hover state */
  --color-card-hover:         #f9fafb;


  /* =========================================================================
     3. Typography
     ========================================================================= */

  /* Font families */
  --font-headline:  'Playfair Display', Georgia, serif;
  --font-body:      'Source Serif 4', 'Times New Roman', serif;
  --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font sizes — rem scale */
  --text-xs:    0.75rem;    /*  12 px */
  --text-sm:    0.875rem;   /*  14 px */
  --text-base:  1rem;       /*  16 px */
  --text-lg:    1.125rem;   /*  18 px */
  --text-xl:    1.25rem;    /*  20 px */
  --text-2xl:   1.5rem;     /*  24 px */
  --text-3xl:   1.875rem;   /*  30 px */
  --text-4xl:   2.25rem;    /*  36 px */
  --text-5xl:   3rem;       /*  48 px */

  /* Line heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Font weights */
  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;


  /* =========================================================================
     4. Spacing — 4 px base scale
     ========================================================================= */

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


  /* =========================================================================
     5. Layout
     ========================================================================= */

  --container-max:          1280px;
  --content-max:             760px;
  --sidebar-width:           300px;
  --header-height:            64px;
  --header-height-mobile:     56px;


  /* =========================================================================
     6. Effects — radii, shadows, transitions, z-indices
     ========================================================================= */

  /* Border radii */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl:  16px;

  /* Box shadows */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;

  /* Z-index layers */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
}