:root {
  --font-size-base: 18px;
  --font-size-h1: 3rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 2rem;

  --color-primary: #0D0D0D;          /* Deep black */
  --color-primaryLight: #1A1A1A;     /* Dark charcoal */
  --color-primaryDark: #000000;      /* Pure black */
  --color-text: #E0E0E0;             /* Light grey */
  --color-textLight: #A3A3A3;        /* Softer light grey */
  --color-background: #121212;       /* Dark background */
  --color-backgroundDark: #0A0A0A;   /* Even darker sections */
  --color-accent: #fffb00;           /* Bold red accent */
  --color-shadow: rgba(0, 0, 0, 0.7);

  --spacing-base: 1.25rem;
  --spacing-large: 2.5rem;
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-base-size);
  color: var(--color-text);
  background-color: var(--color-background);
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
}

h1 { font-size: var(--heading-h1-size); }
h2 { font-size: var(--heading-h2-size); }
h3 { font-size: var(--heading-h3-size); }

.bg-theme-primary { background-color: var(--color-primary); }
.bg-theme-background { background-color: var(--color-background); }
.text-theme-primary { color: var(--color-primary); }
.text-theme-text { color: var(--color-text); }
.text-theme-muted { color: var(--color-muted); }
.bg-theme-button {
  background-color: var(--color-button-bg, #E63946); /* fallback red */
  color: var(--color-button-text, #fff);
}
.bg-theme-button:hover {
  background-color: var(--color-button-bg-hover);
}
header, footer {
  background-color: var(--color-header-bg);
  color: var(--color-header-text);
}

.card-theme {
  background-color: var(--color-primaryLight);
  color: var(--color-text);
}