/* SiteScale Pro — brand tokens and lockup
   Load IBM Plex Sans (400, 600) and IBM Plex Mono (400, 500) before this file. */

:root {
  /* oklch is the source of truth; hex values above each are the sRGB fallback */
  --ss-ink: #2a2c31;
  --ss-ink: oklch(0.28 0.008 265);

  --ss-blue: #0b5fd6;                 /* accent on light grounds */
  --ss-blue: oklch(0.50 0.20 248);

  --ss-blue-on-ink: #4c91f7;          /* accent on the ink ground */
  --ss-blue-on-ink: oklch(0.66 0.17 248);

  --ss-blue-text: #0a4fb0;            /* accent for small text on white, meets 4.5:1 */
  --ss-blue-text: oklch(0.44 0.19 250);

  --ss-paper: #fbfbfc;
  --ss-paper: oklch(0.985 0.002 265);

  --ss-rule: #e3e4e7;
  --ss-rule: oklch(0.91 0.004 265);

  --ss-muted: #6f7278;
  --ss-muted: oklch(0.54 0.01 265);

  --ss-font: "IBM Plex Sans", Helvetica, Arial, sans-serif;
  --ss-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

/* Primary lockup. Set font-size on .ss-lockup; the mark, gaps and Pro all scale from it.
   The 0.86em mark height is 1.23x IBM Plex Sans cap height — do not override it. */
.ss-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.31em;
  font-family: var(--ss-font);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--ss-ink);
  text-decoration: none;
  white-space: nowrap;
}

.ss-lockup__mark {
  width: 0.86em;
  height: 0.86em;
  flex: none;
  display: block;
}

.ss-lockup__mark .ss-corners { fill: var(--ss-ink); }
.ss-lockup__mark .ss-origin  { fill: var(--ss-blue); }

.ss-lockup__pro {
  font-weight: 600;
  color: var(--ss-blue);
  margin-left: 0.21em;
}

/* Reverse — put on the lockup element when it sits on --ss-ink or darker */
.ss-lockup--reverse { color: var(--ss-paper); }
.ss-lockup--reverse .ss-lockup__mark .ss-corners { fill: var(--ss-paper); }
.ss-lockup--reverse .ss-lockup__mark .ss-origin  { fill: var(--ss-blue-on-ink); }
.ss-lockup--reverse .ss-lockup__pro { color: var(--ss-blue-on-ink); }

/* Stacked — for narrow placements */
.ss-lockup--stacked {
  flex-direction: column;
  gap: 0.29em;
}

/* Sizes. Minimum for the full lockup is 20px; below that use the mark alone. */
.ss-lockup--header { font-size: 20px; }
.ss-lockup--sm     { font-size: 24px; }
.ss-lockup--lg     { font-size: 56px; }

/* Clear space: one arm — a third of the mark's height — on all four sides */
.ss-lockup--framed { padding: 0.287em; }

/* Money and quantities: always mono, always tabular, right-aligned */
.ss-figure {
  font-family: var(--ss-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  color: var(--ss-ink);
}