/* ==========================================================================
   PinRich logo — mark (rounded square with 'P') + wordmark.
   --------------------------------------------------------------------------
   2 color variants only, sourced from tokens:

     • Default (corporate)  — mark = --primary (navy), wordmark = --foreground.
                              Use on white / muted / card backgrounds.
     • Inverse (white-out)  — mark = --primary-foreground (white) on primary,
                              wordmark = --primary-foreground.
                              Use on --primary backgrounds (top-page header,
                              hero, dark CTA, footer top-strip).

   No mono / black variant exists. The two variants above cover every brand
   surface; black-only output is intentionally not supported.

   The brand name in the wordmark is fixed: `PinRich` (PascalCase). In
   running copy use the katakana 「ピンリッチ」 instead. Never mix
   `PINRICH` / `Pinrich` / `Pin Rich` anywhere in the wordmark or text.
   ========================================================================== */

.pr-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.pr-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  flex-shrink: 0;
}
.pr-logo-text {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--foreground);
  white-space: nowrap;
  line-height: 1;
}

/* Sizes — md is the header default; lg/xl appear in footer/hero */
.pr-logo--sm { gap: 6px; }
.pr-logo--sm .pr-logo-mark { width: 16px; height: 16px; border-radius: var(--radius-sm); font-size: 10px; }
.pr-logo--sm .pr-logo-text { font-size: var(--text-body-md); }

.pr-logo--md { gap: 8px; }
.pr-logo--md .pr-logo-mark { width: 22px; height: 22px; border-radius: var(--radius-sm); font-size: 14px; }
.pr-logo--md .pr-logo-text { font-size: var(--text-body-lg); }

.pr-logo--lg { gap: 10px; }
.pr-logo--lg .pr-logo-mark { width: 32px; height: 32px; border-radius: var(--radius); font-size: 18px; }
.pr-logo--lg .pr-logo-text { font-size: var(--text-display-sm); }

.pr-logo--xl { gap: 12px; }
.pr-logo--xl .pr-logo-mark { width: 48px; height: 48px; border-radius: var(--radius-lg); font-size: 28px; }
.pr-logo--xl .pr-logo-text { font-size: var(--text-display-md); }

/* Color variants — only the inverse (white-out) is supported.
   The default appearance above already uses corporate navy (--primary). */
.pr-logo--inverse .pr-logo-mark { background: var(--primary-foreground); color: var(--primary); }
.pr-logo--inverse .pr-logo-text { color: var(--primary-foreground); }