/* ============================================
   FRANESMARK - CSS VARIABLES
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --gold:           #d4ac53;
  --gold-hover:     #bc9644;
  --gold-dark:      #a07c2d;
  --gold-glow:      rgba(212, 172, 83, 0.15);
  --gold-glow-md:   rgba(212, 172, 83, 0.25);
  --gold-glow-lg:   rgba(212, 172, 83, 0.40);

  /* ── Backgrounds ── */
  --bg:             #0f0f0f;
  --bg-2:           #1a1a1a;
  --bg-3:           #141414;
  --bg-card:        #161616;
  --bg-card-hover:  #1c1c1c;

  /* ── Borders ── */
  --border:         #2a2a2a;
  --border-hover:   #3a3a3a;
  --border-gold:    rgba(212, 172, 83, 0.30);

  /* ── Text ── */
  --text:           #f5f5f5;
  --text-muted:     #b0b0b0;
  --text-dim:       #707070;
  --text-gold:      #d4ac53;

  /* ── Typography ── */
  --font-heading:   'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:      'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Layout ── */
  --max-w:          1280px;
  --nav-h:          80px;
  --px:             clamp(24px, 5vw, 80px);

  /* ── Spacing ── */
  --s-xs:    8px;
  --s-sm:   16px;
  --s-md:   24px;
  --s-lg:   48px;
  --s-xl:   80px;
  --s-2xl: 120px;

  /* ── Transitions ── */
  --t-fast:   150ms ease;
  --t-base:   250ms ease-out;
  --t-slow:   400ms ease-out;
  --t-enter:  600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-index scale ── */
  --z-shader:  0;
  --z-base:   10;
  --z-card:   20;
  --z-nav:    50;
  --z-modal: 200;

  /* ── Shadows ── */
  --shadow-gold:   0 0 30px rgba(212, 172, 83, 0.15);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 172, 83, 0.10);

  /* ── Border Radius ── */
  --r-sm:   6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;
}