:root {

  /* ── COLORS ── */
  --bg:            #020908;
  --bg-2:          #040d0a;
  --bg-3:          #061210;
  --bg-card:       rgba(4, 13, 10, 0.90);

  --amber:         #c8860a;
  --amber-light:   #f5a623;
  --amber-glow:    #ff9f1c;
  --amber-dim:     rgba(200, 134, 10, 0.12);
  --amber-border:  rgba(200, 134, 10, 0.18);

  --green:         #1aff8c;
  --green-dim:     rgba(26, 255, 140, 0.08);
  --green-border:  rgba(26, 255, 140, 0.22);

  --red:           #c0392b;
  --red-dim:       rgba(192, 57, 43, 0.06);
  --red-border:    rgba(192, 57, 43, 0.20);

  --bone:          #d4c5a9;
  --bone-dim:      #8a7a62;
  --bone-faint:    rgba(212, 197, 169, 0.4);

  --text:          #a8b8a0;
  --text-muted:    #6a7a65;

  --border:        rgba(200, 134, 10, 0.18);
  --border-hover:  rgba(255, 159, 28, 0.50);
  --border-subtle: rgba(200, 134, 10, 0.07);

  /* ── TYPOGRAPHY ── */
  --font-display:  'Cinzel Decorative', serif;
  --font-title:    'Cinzel', serif;
  --font-mono:     'Space Mono', monospace;

  --text-xs:       0.625rem;   /* 10px */
  --text-sm:       0.75rem;    /* 12px */
  --text-base:     0.875rem;   /* 14px */
  --text-md:       1rem;       /* 16px */
  --text-lg:       1.125rem;   /* 18px */
  --text-xl:       1.25rem;    /* 20px */
  --text-2xl:      1.5rem;     /* 24px */
  --text-3xl:      2rem;       /* 32px */
  --text-4xl:      2.5rem;     /* 40px */
  --text-5xl:      3.5rem;     /* 56px */
  --text-hero:     clamp(3.2rem, 10vw, 8rem);

  /* ── SPACING ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── LAYOUT ── */
  --max-width:     1180px;
  --nav-height:    68px;
  --section-py:    6rem;

  /* ── EFFECTS ── */
  --shadow-amber:  0 0 30px rgba(255, 159, 28, 0.25);
  --shadow-card:   0 24px 60px rgba(0, 0, 0, 0.5);
  --glow-amber:    0 0 50px rgba(245, 166, 35, 0.35), 0 0 100px rgba(245, 166, 35, 0.12);
  --glow-green:    0 0 20px rgba(26, 255, 140, 0.20);

  /* ── TRANSITIONS ── */
  --transition-fast:    0.2s ease;
  --transition-base:    0.3s ease;
  --transition-slow:    0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── CLIP PATHS ── */
  --clip-btn:      polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  --clip-card:     polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --clip-nav-btn:  polygon(7px 0%, 100% 0%, calc(100% - 7px) 100%, 0% 100%);
}
