:root {
  /* Brand */
  --gold:           #C8963E;
  --gold-light:     #E8B86D;
  --gold-dim:       rgba(200, 150, 62, 0.15);
  --gold-border:    rgba(200, 150, 62, 0.3);

  /* Gold tonal ramp — dark bronze to pale highlight. gold-400/500 match --gold-light/--gold above. */
  --gold-100:       #FBEFD9;
  --gold-200:       #F3DDB0;
  --gold-300:       #EAC788;
  --gold-400:       #E8B86D;
  --gold-500:       #C8963E;
  --gold-600:       #A67A2F;
  --gold-700:       #7D5A22;
  --gold-800:       #543C16;
  --gold-900:       #2E200C;

  /* Backgrounds */
  --dark:           #0E0E0F;
  --surface:        #161618;
  --card:           #1E1E21;
  --card-raised:    #26221C;

  /* Text */
  --text:           #F0EDE8;
  --muted:          rgba(240, 237, 232, 0.62);

  /* Borders */
  --border:         rgba(255, 255, 255, 0.07);

  /* Status */
  --green:          #4CAF76;
  --blue:           #4A90D9;
  --red:            #E05252;

  /* Elevation — flat by default; used only for focused/active/milestone moments */
  --shadow-molten:  0 8px 24px rgba(20, 10, 0, 0.5);
  --shadow-focus:   0 0 0 3px var(--gold-dim);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Typography */
  --font-display:   'Bebas Neue', sans-serif;
  --font-body:      'Barlow', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;

  /* Spacing */
  --page-padding:   20px;

  /* Radius */
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      16px;

  /* Transitions — ease-out-quint, no bounce */
  --ease-precise:   cubic-bezier(0.16, 1, 0.3, 1);
  --transition:     0.15s var(--ease-precise);
}