/* ========================================
   CSS Variables for News Styles
   ======================================== */

:root {
  /* ===== Breakpoints ===== */
  /* Desktop: default styles (> 1024px) */
  /* Tablet: @media (max-width: 1024px) */
  /* Mobile: @media (max-width: 768px) */

  /* ===== Colors - Primary ===== */
  --color-primary: #00c659;
  --color-primary-hover: #00b953;
  --color-primary-dark: #007133;
  --color-primary-light: #07cd60;

  /* ===== Colors - Text ===== */
  --color-text: #262f56;
  --color-text-light: #737987;
  --color-text-meta: #4f5676;
  --color-text-muted: #7c7c7c;
  --color-text-disabled: #c4c4c4;
  --color-white: #ffffff;
  --color-black: #000000;

  /* ===== Colors - Background ===== */
  --color-bg-white: #fff;
  --color-bg-light: #fcfeff;
  --color-bg-hover: #f4faff;
  --color-bg-hover-alt: #e2f5ff;
  --color-bg-highlight: #ccf4de;

  /* ===== Colors - Borders ===== */
  --color-border: #d9eafa;
  --color-border-alt: #a6bcbc;

  /* ===== Colors - Accents ===== */
  --color-accent-blue: #34c2ff;

  /* ===== Spacing ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 15px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;

  /* Semantic spacing */
  --content-padding-desktop: 24px;
  --content-padding-mobile: 15px;
  --card-padding: 16px;
  --card-padding-small: 10px;

  /* ===== Border Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ===== Transitions ===== */
  --transition-default: all 0.25s ease;
  --transition-linear: all 0.25s linear;

  /* ===== Typography ===== */
  /* Font Sizes */
  --font-size-xs: 9px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 15px;
  --font-size-2xl: 16px;
  --font-size-3xl: 18px;
  --font-size-4xl: 20px;
  --font-size-5xl: 25px;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: bold;

  /* Line Heights */
  --line-height-tight: 1.26;
  --line-height-snug: 1.28;
  --line-height-normal: 1.5;

  /* ===== Dimensions ===== */
  /* Button Heights */
  --button-height-sm: 20px;
  --button-height-md: 32px;
  --button-height-lg: 34px;
  --button-height-xl: 64px;
  --button-height-2xl: 70px;

  /* Card Widths */
  --card-width-default: 259px;
  --card-width-tablet: 30%;
  --card-width-mobile-dual: 45%;
  --card-width-mobile: 100%;

  /* Pagination */
  --pagination-size-desktop: 36px;
  --pagination-size-tablet: 28px;
  --pagination-size-mobile: 25px;
  --pagination-button-width: 101px;

  /* Thumbnail Heights */
  --thumbnail-height-article-desktop: 190px;
  --thumbnail-height-article-tablet: 150px;

  /* ===== Z-Index Scale ===== */
  --z-index-base: 1;
  --z-index-dropdown: 5;
  --z-index-modal: 10;

  /* ===== Shadows ===== */
  --shadow-card-hover: 0 8px 24px rgba(26, 42, 77, 0.16);

  /* ===== Aspect Ratios ===== */
  --aspect-ratio-card: 16/10;
}