/* ============================================================
   CSS Variables — Цвета, шрифты, брейкпоинты, z-index
   ============================================================ */

:root {
  /* ——— Colors ——— */
  --color-black:       #0A0A0A;
  --color-dark:        #1A1A1A;
  --color-darker:      #111111;
  --color-gold:        #D4AF37;
  --color-gold-light:  #E8C84A;
  --color-neon-red:    #FF4500;
  --color-neon-green:  #00FF88;
  --color-concrete:    #8B8B8B;
  --color-silver:      #C0C0C0;
  --color-white:       #FFFFFF;

  /* ——— Gradients ——— */
  --gradient-gold:      linear-gradient(135deg, var(--color-gold), var(--color-neon-red));
  --gradient-neon:      linear-gradient(135deg, var(--color-neon-green), var(--color-neon-red));
  --gradient-dark:      linear-gradient(180deg, var(--color-black) 0%, var(--color-dark) 100%);

  /* ——— Typography ——— */
  --font-display:       'Bebas Neue', sans-serif;
  --font-heading:       'Oswald', sans-serif;
  --font-body:          'Montserrat', sans-serif;
  --font-accent:        'Permanent Marker', cursive;

  /* ——— Sizes ——— */
  --container-max:      1200px;
  --container-tablet:   960px;
  --header-height:      70px;

  /* ——— z-index layers ——— */
  --z-particles:        1;
  --z-content:          2;
  --z-header:           100;
  --z-overlay:          200;
  --z-modal:            300;
}

/* ——— Breakpoints (for reference — used in responsive.css) ——— */
/*
  @custom-media --wide    (min-width: 1440px);
  @custom-media --desktop (min-width: 1024px) and (max-width: 1439px);
  @custom-media --tablet  (min-width: 768px)  and (max-width: 1023px);
  @custom-media --mobile  (max-width: 767px);
  @custom-media --tiny    (max-width: 374px);
*/