/* ==========================================================================
   Rejuvicon — Brand Design Tokens & Logo Styles
   Drop this into any project: <link rel="stylesheet" href="rejuvicon-brand.css">
   ========================================================================== */

:root {
  /* ---- Brand palette --------------------------------------------------- */
  --rjv-slate:        #5a8fcf;  /* primary leaf body            */
  --rjv-slate-light:  #7daae0;  /* lit leaf face                */
  --rjv-slate-deep:   #37598a;  /* wordmark / dark surfaces     */
  --rjv-coral:        #ff7a5c;  /* accent — nodes, CTAs         */
  --rjv-coral-soft:   #ff9b84;  /* hover / lighter accent       */

  /* ---- Neutrals -------------------------------------------------------- */
  --rjv-ink:          #2b3a48;  /* body text                    */
  --rjv-muted:        #94a3b5;  /* secondary text / tagline     */
  --rjv-line:         #e6eaef;  /* borders, dividers            */
  --rjv-surface:      #f7f9fb;  /* app background               */
  --rjv-white:        #ffffff;

  /* ---- Typography ------------------------------------------------------ */
  --rjv-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rjv-wordmark-tracking: -0.02em;
  --rjv-tagline-tracking: 0.22em;

  /* ---- Radius & elevation --------------------------------------------- */
  --rjv-radius-sm: 8px;
  --rjv-radius-md: 14px;
  --rjv-radius-lg: 24px;
  --rjv-shadow: 0 6px 24px rgba(63, 84, 112, 0.12);

  /* ---- Spacing scale --------------------------------------------------- */
  --rjv-space-1: 4px;
  --rjv-space-2: 8px;
  --rjv-space-3: 16px;
  --rjv-space-4: 24px;
  --rjv-space-5: 40px;
}

/* ==========================================================================
   Wordmark (text-only fallback — pairs with the inline SVG mark)
   ========================================================================== */
.rjv-wordmark {
  font-family: var(--rjv-font);
  font-weight: 400;
  letter-spacing: var(--rjv-wordmark-tracking);
  color: var(--rjv-slate-deep);
  line-height: 1;
}
/* ==========================================================================
   Logo lockup helper — inline SVG mark + text
   ========================================================================== */
.rjv-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--rjv-space-3);
  text-decoration: none;
}
.rjv-logo__mark { display: block; flex: none; }
.rjv-logo--sm .rjv-logo__mark { width: 32px; height: 32px; }
.rjv-logo--md .rjv-logo__mark { width: 48px; height: 48px; }
.rjv-logo--lg .rjv-logo__mark { width: 72px; height: 72px; }
.rjv-logo__name { font-size: 1.75rem; }
.rjv-logo--sm .rjv-logo__name { font-size: 1.25rem; }
.rjv-logo--lg .rjv-logo__name { font-size: 2.5rem; }

/* ==========================================================================
   Buttons (accent usage example)
   ========================================================================== */
.rjv-btn {
  font-family: var(--rjv-font);
  font-size: 0.95rem;
  font-weight: 500;
  border: none;
  border-radius: var(--rjv-radius-md);
  padding: 12px 22px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.rjv-btn--primary { background: var(--rjv-coral); color: var(--rjv-white); }
.rjv-btn--primary:hover { background: var(--rjv-coral-soft); }
.rjv-btn--ghost {
  background: transparent;
  color: var(--rjv-slate-deep);
  border: 1.5px solid var(--rjv-line);
}
.rjv-btn--ghost:hover { border-color: var(--rjv-slate); }

/* ==========================================================================
   Clear space — never crowd the logo. Min padding = 0.5x mark height.
   ========================================================================== */
.rjv-logo { padding: 8px; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .rjv-btn { transition: none; }
}