/* Auto/Reclaim public-surface design system.
   Tokens + logo classes for all public-facing HTML in this repo.

   Email canonical (LOCKED):
   - Plain Unicode "/" character, lime #C5F94B, font-weight 800
   - No skew, no transform, no remote/base64 image
   - Reason: inline SVG stripped by Outlook web/Gmail. PNG hits image-block
     policy on cold-domain first sends in Outlook desktop. Plain text renders
     universally on first load.
   - Loses the -14° brand skew in email contexts. Web surfaces retain canonical.

   Web canonical (.ar-logo / .ar-logo-slash):
   - HTML span with CSS skewX(-14deg) scaleX(0.55) on a typographic / glyph
   - Renders correctly in browser environments with full CSS support
*/

:root {
  --ar-forge:   #0E1620;
  --ar-bone:    #F5F5F0;
  --ar-lime:    #C5F94B;
  --ar-line:    rgba(245, 245, 240, 0.12);
  --ar-fg:      var(--ar-bone);
  --ar-display: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ar-mono:    'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Logo wordmark — Auto/Reclaim in mixed case, skewed lime slash.

   Narrow-viewport monogram swap deferred. Wordmark at 22px is ~136px wide,
   fits in 375px viewport. Add markup-cooperative swap (sibling-span pattern
   from the logo consolidation discussion) if a real overflow surfaces at
   eye-check or beta-partner report. */

.ar-logo {
  font-family: var(--ar-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ar-fg);
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

.ar-logo-slash {
  display: inline-block;
  color: var(--ar-lime);
  transform: skewX(-14deg) scaleX(0.55);
  margin: 0 0.04em;
}

/* .ar-logo-mono — square monogram "A/R", reserved for future narrow-
   viewport fallback. No production surfaces consume it currently. */
.ar-logo-mono {
  color: var(--ar-lime);
  font-size: 32px;
}

/* On a lime ground the lime slash and lime monogram disappear. Surfaces
   that place the logo on lime must locally override:
       .my-lime-surface .ar-logo-slash,
       .my-lime-surface .ar-logo-mono { color: var(--ar-forge); }
*/