/* ============================================================================
   Llama Monkey Design Tokens — v1
   ----------------------------------------------------------------------------
   Canonical palette + typography + spacing + radii for Llama Monkey-branded
   apps. Sourced from the brand hub at https://www.llamamonkey.com.

   Copy-paste portable: this file is the single source of truth. Future
   Llama Monkey apps (SnapMonkey, Llama Vision, QuoteLlama, …) should vendor
   this file and import it from their Tailwind entrypoint. A follow-up
   `bpassmore/llama-monkey-brand` repo will host this as the upstream.

   Tailwind v4 picks up the `@theme inline` block via the entrypoint that
   imports this file, surfacing the tokens as utility classes (`bg-lm-navy`,
   `text-lm-coral`, `font-lm-sans`, …). Raw `var(--lm-*)` references work
   anywhere CSS does.
   ========================================================================= */

:root {
  /* Surface */
  --lm-navy: #1a1a2e;            /* primary background */
  --lm-navy-elevated: #16213e;   /* card / surface bg */

  /* Accent */
  --lm-coral: #e94560;
  --lm-coral-hover: #ff6b81;

  /* Text */
  --lm-text: #eee;
  --lm-text-muted: #a0a0b8;

  /* Borders / overlays */
  --lm-border: rgba(255, 255, 255, 0.05);
  --lm-border-accent: rgba(233, 69, 96, 0.2);
  --lm-coral-tint: rgba(233, 69, 96, 0.15);

  /* Typography */
  --lm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;

  /* Radii */
  --lm-radius-sm: 8px;
  --lm-radius-md: 12px;
  --lm-radius-lg: 16px;

  /* Container */
  --lm-container-max: 1200px;
  --lm-content-max: 1000px;
}

/* Tailwind v4 theme bridge — exposes the LM tokens as Tailwind utilities.
   `inline` keeps the tokens computed at build time so the utility classes
   resolve to the var() references rather than baking literal values. */
@theme inline {
  --color-lm-navy: var(--lm-navy);
  --color-lm-navy-elevated: var(--lm-navy-elevated);
  --color-lm-coral: var(--lm-coral);
  --color-lm-coral-hover: var(--lm-coral-hover);
  --color-lm-text: var(--lm-text);
  --color-lm-text-muted: var(--lm-text-muted);
  --color-lm-border: var(--lm-border);

  --font-lm-sans: var(--lm-font-sans);

  --radius-lm-sm: var(--lm-radius-sm);
  --radius-lm-md: var(--lm-radius-md);
  --radius-lm-lg: var(--lm-radius-lg);
}

/* Component utilities — small, opinionated helpers for patterns that
   recur on LM landing pages (gradient accent text, numbered step squares,
   section-label eyebrow). Stay minimal; prefer Tailwind utilities first. */

.lm-accent-gradient-text {
  background: linear-gradient(135deg, var(--lm-coral), var(--lm-coral-hover));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lm-section-eyebrow {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--lm-coral);
}

.lm-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--lm-radius-sm);
  background: var(--lm-coral);
  color: #fff;
  font-weight: 700;
}