:root {
  /* Gold palette */
  --color-primary: #F0A500;
  --color-primary-light: #FFD000;
  --color-primary-dark: #C87800;
  --color-primary-deep: #8B5500;

  /* Backgrounds */
  --bg: #0E0C07;
  /* base page layer         */
  --bg2: #161208;
  /* modals, hero, nav        */
  --bg3: #1E1A0E;
  /* cards, stat boxes        */
  --bg4: #252015;
  /* thumbnails, inputs       */

  /* Borders */
  --border: rgba(240, 165, 0, 0.12);
  /* subtle   */
  --border2: rgba(240, 165, 0, 0.22);
  /* emphasis */

  /* Border */
  /* hero arrow border  */
  --border-arrow: rgba(240, 165, 0, 0.25);
  /* card hover shadow  */
  --color-primary-glow: rgba(240, 165, 0, 0.10);

  /* Text */
  --text: #F5EDD5;
  /* primary   */
  --text2: #9A8C6A;
  /* secondary */
  --text3: #5C5238;
  /* tertiary  */

  /* On-gold text (buttons, badges, ticker) */
  --color-on-primary: #1a1200;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Typography */
  --font-head: 'Oswald', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Gradient */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
  --gradient-primary-h: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
  --gradient-ticker: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-dark));

  /* Overlay */
  --scrim-arrow: rgba(0, 0, 0, 0.45);
  --scrim-modal: rgba(0, 0, 0, 0.72);
  --scrim-close: rgba(0, 0, 0, 0.50);
  --scrim-dot: rgba(240, 165, 0, 0.30);
}