/* Spelling Gems — Logo component
   Composed entirely from CSS + HTML + the Blink component.

   Variants:
     .logo-lockup                  — Blink left + wordmark (light background)
     .logo-lockup.logo--on-dark    — same on dark background
     .logo-lockup.logo--wordmark-only — wordmark only, no Blink

   Sizes:
     .logo--sm   approx 140px wide
     .logo--md   approx 200px wide (default)
     .logo--lg   approx 280px wide
*/

.logo-lockup {
  --logo-scale: 1;
  display: inline-flex;
  align-items: center;
  gap: calc(24px * var(--logo-scale));
  text-decoration: none;
  line-height: 1;
}

/* Hide Blink in wordmark-only mode */
.logo-lockup.logo--wordmark-only .blink {
  display: none;
}

/* ── Wordmark ── */
.logo-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(28px * var(--logo-scale));
  letter-spacing: -0.01em;
  color: var(--ink-primary);
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}

.logo-lockup.logo--on-dark .logo-wordmark {
  color: var(--bg-elevated);
}

/* The "G" in Gems gets a subtle diagonal facet mark */
.logo-wordmark .logo-g {
  position: relative;
  display: inline-block;
}

/* G facet line — per 04_ASSET_LIBRARY.md §1 and 06_PROMPT_PATTERNS.md A1.1/A1.3:
   "a thin line at 30° from horizontal, same weight as a 1px stroke in
    ink-primary at 60% opacity, positioned across the counter of the G." */
.logo-wordmark .logo-g::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 15%;
  width: 70%;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transform: rotate(-30deg);
  transform-origin: center;
  pointer-events: none;
}

/* ── Size modifiers ── */
.logo--sm {
  --logo-scale: 0.7;
}

.logo--sm .blink {
  --blink-size: 48px;
}

.logo--md .blink {
  --blink-size: 64px;
}

.logo--lg {
  --logo-scale: 1.4;
}

.logo--lg .blink {
  --blink-size: 88px;
}

/* ── Blink tilt in the lockup (15° to the right) ── */
.logo-lockup:not(.logo--wordmark-only) .blink {
  transform: rotate(15deg);
  flex-shrink: 0;
}