/* ============================================================================
   iDebate brand-mark CSS — SINGLE SOURCE OF TRUTH.

   Used by:
     - React app (via <link> in client/index.html)
     - Static landing HTML (client/public/landing/*.html)
     - calibrate.html

   To roll back to text logos site-wide: set the two `--brand-*-url` vars
   below to `none`, then add `.brand-wordmark::before { content: "iDebate"; }`
   and `.brand-symbol::before { content: "iD"; }` rules. ONE FILE edit
   reverts every surface.
   ============================================================================ */

:root {
  --brand-wordmark-url: url('/iDebate-wordmark.png');
  --brand-symbol-url:   url('/iDebate-symbol.png');
}

.brand-wordmark {
  display: inline-block;
  background-image: var(--brand-wordmark-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
.brand-wordmark--xs { width:  60px; height:  34px; }
.brand-wordmark--sm { width:  90px; height:  50px; }
.brand-wordmark--md { width: 130px; height:  73px; }
.brand-wordmark--lg { width: 200px; height: 112px; }

.brand-symbol {
  display: inline-block;
  background-image: var(--brand-symbol-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
.brand-symbol--xs { width: 32px; height: 32px; }
.brand-symbol--sm { width: 48px; height: 48px; }
.brand-symbol--md { width: 56px; height: 56px; }
.brand-symbol--lg { width: 64px; height: 64px; }