/* ==========================================================================
   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);
      }