/* Baithak brand tokens & utility classes.
   Wordmark in baithak-logo.svg is rendered dark (#1F1F1F) on light backgrounds.
   For dark UIs, prefer baithak-mark.svg (monochrome, currentColor) or
   filter the logo via CSS (see .baithak-logo--invert below). */

:root {
  --baithak-saffron: #C2410C;
  --baithak-saffron-dark: #9A330A;
  --baithak-teal: #0F766E;
  --baithak-teal-dark: #0B5550;
  --baithak-bg: #FAF9F5;
  --baithak-bg-dark: #18181B;
  --baithak-text: #1F1F1F;
  --baithak-text-muted: #6B6B6B;
  --baithak-font: -apple-system, system-ui, "Segoe UI", sans-serif;
  --baithak-font-script: Georgia, "Times New Roman", serif;
}

/* Inline SVG sizing — pair with width/height on the <svg> or set via class. */
.baithak-logo {
  display: inline-block;
  height: 56px;
  width: auto;
  vertical-align: middle;
}

.baithak-logo--sm { height: 32px; }
.baithak-logo--lg { height: 96px; }

/* On dark UIs, invert the rasterized logo so the dark wordmark stays legible. */
.baithak-logo--invert { filter: invert(1) hue-rotate(180deg); }

/* Wordmark text token for HTML-rendered "baithak" (when not using the SVG). */
.baithak-wordmark {
  font-family: var(--baithak-font);
  font-weight: 500;
  color: var(--baithak-text);
  letter-spacing: -0.01em;
}

.baithak-wordmark--saffron { color: var(--baithak-saffron); }

.baithak-tagline {
  font-family: var(--baithak-font);
  font-size: 11px;
  font-weight: 400;
  color: var(--baithak-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}