/* ================================
   CSS Custom Properties (Variables)
   ================================ */

:root {
  /* Colors */
  --color-primary: #ff412c;
  --color-black: #0c0c0d;
  --color-gray: #969696;
  --color-gray-dark: #5d5d5d;
  --color-gray-medium: #7d7d7d;
  --color-gray-light: #d9d9d9;
  --color-gray-lighter: #f6f6f6;
  --color-bg: #f0f0f0;
  --color-white: #ffffff;
  --color-tag-bg: #fff4f4;    /* Light red background for tags */

  /* Typography */
  --font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 0.9375rem;    /* 15px */
  --font-size-medium: 1.125rem;    /* 18px */
  --font-size-large: 2.0625rem;    /* 33px */
  --font-weight-book: 450;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-height-tight: 1.13;       /* 17px / 15px */
  --line-height-medium: 1.33;      /* 24px / 18px */
  --line-height-large: 1;          /* 33px / 33px */
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --spacing-xs: 0.5rem;     /* 8px */
  --spacing-sm: 0.75rem;    /* 12px */
  --spacing-md: 1.25rem;    /* 20px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 6rem;       /* 96px */

  /* News-specific spacing */
  --news-card-padding: 1.5rem;    /* 24px */
  --news-card-gap: 1.875rem;      /* 30px */
  --news-grid-gap: 1.5rem;        /* 24px */
  --news-meta-gap: 0.75rem;       /* 12px */
  --news-tag-padding: 0.5rem;     /* 8px */

  /* Border Radius */
  --radius-sm: 0.75rem;     /* 12px */
  --radius-md: 1rem;        /* 16px */
  --radius-lg: 1.25rem;     /* 20px */
  --radius-xl: 1.5rem;      /* 24px */

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Layout */
  --container-max-width: 78rem;    /* 1312px */
  --sidebar-width: 15.75rem;       /* 252px */
  --header-height: 5.5rem;         /* 88px */

  /* Z-index */
  --z-header: 100;
  --z-sidebar: 50;
  --z-overlay: 200;
}