/* SenseApp Technology — design tokens
   Source of truth: brand.senseapptechnology.com/tokens.css
   Do not fork into per-app copies — link this file directly. */

:root {
  /* Light mode */
  --sa-paper: #edf0f2;
  --sa-paper-raised: #fff;
  --sa-ink: #17324a;
  --sa-ink-soft: #45525f;
  --sa-ink-faint: #6b7885;
  --sa-brass: #cf6a1f;
  --sa-brass-strong: #a8541a;
  --sa-line: #c7d0d6;
  --sa-line-soft: #dde3e6;
  --sa-good: #3f7a5c;

  /* Type */
  --sa-font-heading: 'IBM Plex Serif', serif;
  --sa-font-body: 'IBM Plex Sans', sans-serif;
  --sa-font-mono: 'IBM Plex Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* TODO: confirm dark-mode equivalents against the live spec */
  }
}

:root[data-theme="dark"] {
  /* TODO: confirm dark-mode equivalents against the live spec */
}

/* Header lockup: logo + divider + tagline, matching the proportions
   measured directly off the live senseapptechnology.com header.
   Usage:
   <div class="sa-header-lockup" style="--sa-logo-h: 48px">
     <img class="sa-header-lockup__logo" src="https://brand.senseapptechnology.com/logo-full.svg" alt="SenseApp Technology">
     <span class="sa-header-lockup__divider"></span>
     <span class="sa-header-lockup__tagline">Applications that Make Sense</span>
   </div>
   Set --sa-logo-h to whatever logo height the app needs; everything
   else (divider height, both gaps, tagline size) scales off it. */
.sa-header-lockup {
  --sa-logo-h: 48px;
  display: inline-flex;
  align-items: center;
}
.sa-header-lockup__logo {
  height: var(--sa-logo-h);
  width: auto;
  display: block;
}
.sa-header-lockup__divider {
  width: 1px;
  height: calc(var(--sa-logo-h) * 0.38);
  background: var(--sa-line);
  margin: 0 calc(var(--sa-logo-h) * 0.35) 0 calc(var(--sa-logo-h) * 0.41);
  flex-shrink: 0;
}
.sa-header-lockup__tagline {
  font-family: var(--sa-font-heading);
  color: var(--sa-ink-soft);
  font-size: calc(var(--sa-logo-h) * 0.346);
  white-space: nowrap;
}
:root[data-theme="dark"] .sa-header-lockup__divider,
:root:not([data-theme="light"]) .sa-header-lockup__divider {
  background: var(--sa-ink-faint, var(--sa-line));
}