/*
 * Custom color variables centralized for the site. These variables mirror
 * values defined in tailwind.config.js and any custom colours used
 * throughout the templates. Moving them into this file allows the
 * removal of inline colour definitions from individual HTML files so
 * Tailwind can be the single source of truth for colour values.
 */

:root {
  /* Primary brand colours */
  --primary-color: #D97706;        /* amber-600 (primary) */
  --primary-color-dark: #B45309;  /* amber-700 */
  --primary-color-light: #FBBF24; /* amber-400, used for highlights */

  /* Supporting colours */
  --primary-glow: rgba(217, 119, 6, 0.4); /* glow effect used in some cards */
  --dark-bg: #111111;             /* very dark background */
  --light-dark-bg: #1f1f1f;       /* slightly lighter dark background */
  --card-bg: #202020;             /* dark card background used on some pages */

  /* Text and border colours */
  --text-light: #E5E7EB;          /* light grey for text on dark backgrounds */
  --text-dark: #121212;           /* dark grey for text on light backgrounds */
  --border-color: #374151;        /* grey border colour */

  /* Additional semantic colours used across multiple pages */
  --text-muted: #9CA3AF;         /* muted text colour (grey) */
  --border-color-generic: #374151; /* generic border colour matching tailwind's gray-600 */

  /* CTA specific colours (e.g. WhatsApp button) */
  --whatsapp-color: #25D366;      /* standard WhatsApp green */
  --whatsapp-color-dark: #1FAF54; /* darker shade on hover */

  /* Success colour used on coins page */
  --success-color: #25D366;

  /* Card border colour (alias of border colour) */
  --card-border: #374151;

  /* Additional page-specific dark backgrounds mapped to general values */
  --dark-bg-main: #111111;
  --dark-bg-secondary: #1f1f1f;
}