/* === YarNews Design System v5 === */
/* Жёлтая палитра + layout-структура по спецификации */

:root {
  /* Шрифт */
  --font-primary: 'Roboto', system-ui, sans-serif;

  /* Палитра — жёлтый бренд */
  --color-primary: #FFCC00;
  --color-primary-dark: #E6B800;
  --color-accent: #FFCC00;

  /* Текст */
  --color-text: #1f1f1f;
  --color-text-secondary: #666;
  --color-text-muted: #8b8b8b;
  --color-text-inverse: #FFF;

  /* Фоны */
  --color-bg: #f4f4f4;
  --color-bg-card: #FFF;
  --color-bg-footer: #1A1A1A;

  /* Шапка */
  --color-top-header-bg: #1A1A1A;
  --color-top-header-text: rgba(255,255,255,0.85);
  --color-main-header-bg: var(--color-primary);
  --color-main-header-text: #1A1A1A;

  /* Границы */
  --color-border: #ececec;

  /* Тени */
  --shadow-card: none;
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08);

  /* Layout */
  --layout-max-width: 1280px;
  --layout-padding: 24px;
  --grid-gap: 18px;

  /* Радиусы */
  --radius: 18px;
  --radius-sm: 10px;
  --radius-pill: 18px;

  /* Spacing */
  --space-card: 18px;
  --space-row: 14px;
  --space-section: 18px;

  /* Transitions */
  --transition: 0.15s ease;

  /* Z-index */
  --z-header: 100;
  --z-burger: 1100;
  --z-overlay: 1000;
}

/* === Dark Mode === */
[data-theme="dark"] {
  --color-text: #E0E0E0;
  --color-text-secondary: #BBB;
  --color-text-muted: #888;

  --color-bg: #111;
  --color-bg-card: #1A1A1A;
  --color-bg-footer: #0A0A0A;

  --color-top-header-bg: #000;
  --color-main-header-bg: #1A1A1A;
  --color-main-header-text: #E0E0E0;

  --color-border: #2A2A2A;
}