/* Global Theme Layer: Palette + Safe Defaults */
:root {
  --color-bg: #323232;
  --color-cyan: #008080; /* brand cyan */
  --color-white: #FFFFFF;
  --color-nearwhite: #FBFBFA;
  --color-gold: #D4AF37; /* live badge gold */
  --color-black: #000000;
  --color-border-dark: #323232; /* subtle border on dark backgrounds */
  --color-border-dark-alpha: rgba(0, 0, 0, 0.35); /* alternative border with alpha */
}

/* Low-specificity global defaults; page CSS may override */
html, body {
  background-color: var(--color-bg);
  color: var(--color-white);
}

/* Base text colors (keeps existing typography/spacing) */
body, p, h1, h2, h3, h4, h5, h6 {
  color: var(--color-white);
}

h3 {
  margin-top: 0;
}

/* Links: brand cyan, subtle hover */
a {
  color: var(--color-cyan);
  text-decoration: none;
}
a:hover {
  color: var(--color-cyan);
  text-decoration: underline;
}
a:focus {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--color-cyan);
  color: var(--color-white);
}

/* Form controls focus (safe, subtle) */
input:focus, textarea:focus, select:focus, button:focus {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}