/* ==========================================================
   HAYTHIVE - Main Stylesheet
   Brand: #591C53 (plum) | #C3221F (red)
   Fonts: Anton (titles) | Open Sans (body)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── CSS CUSTOM PROPERTIES ─────────────────────────────── */
:root {
  --clr-plum:        #591C53;
  --clr-red:         #C3221F;
  --clr-plum-light:  #7a2870;
  --clr-red-light:   #e0362f;
  --clr-dark:        #0a0a10;
  --clr-dark-2:      #111118;
  --clr-dark-3:      #1a1a24;
  --clr-surface:     #16161f;
  --clr-border:      rgba(255,255,255,0.07);
  --clr-text:        #e8e8f0;
  --clr-text-muted:  #9090a8;
  --clr-white:       #ffffff;

  --grad-brand:      linear-gradient(135deg, var(--clr-plum), var(--clr-red));
  --grad-glow-plum:  radial-gradient(ellipse at center, rgba(89,28,83,0.4) 0%, transparent 70%);
  --grad-glow-red:   radial-gradient(ellipse at center, rgba(195,34,31,0.3) 0%, transparent 70%);

  --font-title:      'Anton', sans-serif;
  --font-body:       'Inter', sans-serif;

  --radius-sm:       6px;
  --radius-md:       12px;
  --radius-lg:       20px;
  --radius-xl:       32px;

  --shadow-card:     0 8px 40px rgba(0,0,0,0.5);
  --shadow-glow-red: 0 0 40px rgba(195,34,31,0.25);
  --shadow-glow-plum:0 0 40px rgba(89,28,83,0.35);

  --transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  --transition-fast: all 0.2s ease;
}