/* Option B: "Black & Red"
   Near-black site, cream text, logo-red buttons and accents; red strip; the cream badge pops.
   Theme = palette + which tone each part of the page uses. Layout lives in styles.css. */
:root {
  /* Exact colors sampled from the logo (logo-src.jpg, median of each ink) */
  --logo-red: #B90910;    /* outer ring + wave */
  --logo-black: #010002;  /* lettering, silhouettes, inner ring */
  --logo-cream: #FFF3DE;  /* badge fill */
  --bg: #0F0D0D;
  --bg-2: #161413;
  --panel: #1C1918;
  --panel-2: #242120;
  --line: rgba(255, 243, 222, .1);
  --line-2: rgba(255, 243, 222, .18);
  --text: #F3E8D4;
  --heading: var(--logo-cream);
  --muted: #C9BDAA;
  --accent: var(--logo-red);
  --accent-hover: #D10B14;
  --accent-text: #FF4F55;   /* brighter logo red so small red text passes AA on black */
  --accent-soft: rgba(185, 9, 16, .2);
  --on-accent: var(--logo-cream);
  --btn-edge: transparent;
  --btn-glow: rgba(185, 9, 16, .75);
  --ghost-line: rgba(255, 243, 222, .3);
  --ghost-line-hover: rgba(255, 243, 222, .55);
  --ghost-bg: rgba(255, 243, 222, .05);
  --ghost-bg-hover: rgba(255, 243, 222, .1);
  --ghost-text: var(--logo-cream);
  --input-bg: #0B0A0A;
  --input-line: rgba(255, 243, 222, .22);
  --placeholder: #9C9182;
  --success: #7FE0A8;
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .85);
  --shadow-sm: 0 12px 26px -22px rgba(0, 0, 0, .7);
  --strip-mark: var(--logo-red);
}

/* Footer: the logo's own black */
.site-footer {
  --bg: var(--logo-black);
}

/* Red tone: the service strip */
.strip {
  --bg: var(--logo-red);
  --text: var(--logo-cream);
  --heading: var(--logo-cream);
  --line: rgba(1, 0, 2, .25);
  --strip-mark: var(--logo-black);
}