/* =========================================================================
   CSS Variables – Colors, Typography, etc.
======================================================================== */
:root {
  /* Colors */
  --swatch--neutral-darkest: #0d0d0d;
  --swatch--neutral-darker: #121212;
  --swatch--neutral-dark: #1f1f1f;
  --swatch--neutral: #3d3d3d;
  --swatch--neutral-light: #4d4d4d;
  --swatch--neutral-lighter: #666;
  --swatch--neutral-lightest: #999;
  --swatch--white: white;
  --swatch--black: #000;
  --swatch--silver: #bbb;
  --swatch--grey: #999;
  --swatch--error: #8b0000;
  --swatch--transparent: #fff0;
  --swatch--transparent-10: #ffffff1a;
  --swatch--transparent-5: #ffffff0d;
  --swatch--brand-1: #C40A16;
  --swatch--brand-2: #C40A16;
  --swatch--brand-3: #171717;

  /* Typography */
  --font-family--paragraph-font: Poppins, sans-serif;
  --font-family--heading-font: Poppins, sans-serif;
  --font-family--heading-font-weight: 400;
  --font--paragraph: var(--swatch--grey);
  --font--heading-primary: var(--swatch--white);
  --font--heading-secondary: var(--swatch--grey);
  --font--text-gradient-1: var(--swatch--brand-1);
  --font--text-gradient-2: var(--swatch--brand-2);

  /* Mobile Menu */
  --icon--icon-color: var(--swatch--neutral-lightest);

  /* Backgrounds */
  --background-color--primary: var(--swatch--neutral-darkest);
  --background-color--secondary: var(--swatch--neutral-darker);
  --background-color--alternate: var(--swatch--white);
  --background-color--tertiary: var(--swatch--neutral-dark);

  /* Borders & Form */
  --border--primary: var(--swatch--neutral-dark);
  --border--secondary: var(--swatch--neutral);
  --border--tertiary: var(--swatch--neutral-light);
  --border--alternate: var(--swatch--white);
  --border--radius: 0.5rem;

  --form--border: var(--border--primary);
  --form--background: var(--background-color--secondary);
  --form--place-holder-text: var(--font--paragraph);
  --form--focused-text: var(--font--heading-primary);
  --form--focused-border: var(--swatch--neutral-lightest);
  --form--background-success: var(--swatch--neutral-light);
  --form--background-error: var(--swatch--error);
  --form--text-success: var(--swatch--white);
  --form--text-error: var(--swatch--white);

  /* Links */
  --link--link-color: var(--swatch--silver);
  --link--link-hover-color: var(--swatch--white);

  /* Buttons */
  --button-primary--border: #C40A16;
  --button-primary--border-radius: 0.5rem;
  --button-primary--background: #C40A16;
  --button-primary--text: #ffffff;
  --button-primary--border-hover: #ffffff;
  --button-primary--background-hover: #e0b020;
  --button-primary--text-hover: #ffffff;

  --button-secondary--text: #ffffff;
  --button-secondary--border: #C40A16;
  --button-secondary--background: var(--swatch--transparent);
  --button-secondary--border-hover: #C40A16;
  --button-secondary--background-hover: #C40A16;
  --button-secondary--text-hover: #C40A16;

  --button-pricing--border: var(--swatch--silver);
  --button-pricing--border-radius: 0.5rem;
  --button-pricing--background: var(--swatch--silver);
  --button-pricing--text: var(--swatch--black);
  --button-pricing--border-hover: var(--swatch--grey);
  --button-pricing--background-hover: var(--swatch--grey);
  --button-pricing--text-hover: var(--swatch--black);
}

/* =========================================================================
   Global Styles
======================================================================== */
body {
	background-color: #000;
  	color: var(--font--paragraph);
  	line-height: 1.5;
}

.menu:hover {
	background-color: var(--swatch--brand-1);
}

.card {
	background-color: var(--swatch--neutral-darkest);
}

.card-second {
	background-color: var(--swatch--neutral-darker);
}

.card-third {
	background-color: var(--swatch--neutral-dark);
}

.card-third-circle {
	background-color: #5b5b5b;
}

.table-header {
  	background-color: var(--swatch--neutral-darker);
}

.bottom-seperator {
	border-bottom: 1px solid var(--swatch--neutral-dark);
}

.top-seperator {
	border-top: 1px solid var(--swatch--neutral-dark);
}

#radial-chart .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
    fill: #999999 !important;
}

#radial-chart .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
    fill: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
    .dark\:bg-gray-900\/80 {
        background-color: color-mix(in oklab, #000000 80%, transparent) !important;
    }
}


.bg-gray-900\/50 {
    background-color: color-mix(in oklab, #000000 50%, transparent) !important;
}