/* ============================================================
   Jacob Tapp Creations — Design-system component styles
   Extracted from the design-system bundle (Button, Card, Badge,
   Eyebrow, StarField, Wordmark, Input/Textarea) so they ship as
   static CSS rather than being injected at runtime.
   ============================================================ */

/* ---- Badge ------------------------------------------------------- */
.jt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  line-height: 1;
  padding: 0.4em 0.85em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.jt-badge svg { width: 1.1em; height: 1.1em; }
.jt-badge--gold   { background: var(--gold-tint);     color: #8a6a16; }
.jt-badge--blue   { background: var(--sky-blue-tint);  color: var(--sky-blue); }
.jt-badge--teal   { background: var(--teal-tint);      color: #1c7d6c; }
.jt-badge--pink   { background: var(--pink-tint);      color: #b34688; }
.jt-badge--purple { background: var(--purple-tint);    color: var(--aurora-purple); }
.jt-badge--coral  { background: #fbe4df;               color: var(--coral-red); }
.jt-badge--solid  { background: var(--sunset-orange);  color: #fff; }
.mode-starlight .jt-badge--gold,
[data-mode="starlight"] .jt-badge--gold {
  background: var(--night-glow); color: var(--heavenly-gold);
}

/* ---- Button ------------------------------------------------------ */
.jt-btn {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  border-radius: var(--radius-pill);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft);
}
.jt-btn:focus-visible { outline: var(--border-width-bold) solid var(--focus-ring); outline-offset: 2px; }
.jt-btn:active { transform: scale(0.97); }
.jt-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.jt-btn svg { width: 1.15em; height: 1.15em; }

/* sizes */
.jt-btn--sm { font-size: var(--text-sm); padding: 0.5rem 1rem; }
.jt-btn--md { font-size: var(--text-base); padding: 0.7rem 1.4rem; }
.jt-btn--lg { font-size: var(--text-lg); padding: 0.9rem 1.9rem; }

/* primary = THE call to action (sunset orange on light, heavenly gold on dark) */
.jt-btn--primary { background: var(--cta); color: var(--cta-text); box-shadow: var(--shadow-cta); }
.jt-btn--primary:hover:not([disabled]) { background: var(--cta-hover); box-shadow: var(--shadow-lg); }

/* secondary = sky-blue brand */
.jt-btn--secondary { background: var(--brand-primary); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }
.jt-btn--secondary:hover:not([disabled]) { filter: brightness(0.94); box-shadow: var(--shadow-md); }

/* outline = quiet, on cream */
.jt-btn--outline { background: transparent; color: var(--brand-primary); box-shadow: inset 0 0 0 var(--border-width-bold) var(--brand-primary); }
.jt-btn--outline:hover:not([disabled]) { background: var(--sky-blue-tint); }

/* ghost = text-only */
.jt-btn--ghost { background: transparent; color: var(--text-body); }
.jt-btn--ghost:hover:not([disabled]) { background: var(--border-soft); }

/* ---- Card -------------------------------------------------------- */
.jt-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: var(--border-width) solid var(--border-soft);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.jt-card--pad { padding: var(--space-5); }
.jt-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mode-starlight .jt-card,
[data-mode="starlight"] .jt-card { box-shadow: var(--shadow-gold); }

/* ---- Eyebrow ----------------------------------------------------- */
.jt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.jt-eyebrow svg { width: 1.1em; height: 1.1em; }
.jt-eyebrow::before {
  content: "";
  width: 1.6em; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.jt-eyebrow--bare::before { display: none; }

/* ---- StarField --------------------------------------------------- */
.jt-starfield {
  position: relative;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(253,246,232,0.9), transparent),
    radial-gradient(1.5px 1.5px at 78% 16%, rgba(242,199,91,0.95), transparent),
    radial-gradient(1px 1px at 34% 64%, rgba(253,246,232,0.7), transparent),
    radial-gradient(2px 2px at 62% 48%, rgba(242,199,91,0.85), transparent),
    radial-gradient(1px 1px at 88% 70%, rgba(253,246,232,0.7), transparent),
    radial-gradient(1.5px 1.5px at 22% 82%, rgba(242,199,91,0.8), transparent),
    radial-gradient(1px 1px at 50% 30%, rgba(253,246,232,0.6), transparent),
    radial-gradient(900px 600px at 80% -10%, var(--night-haze), transparent),
    linear-gradient(150deg, var(--night-blue), var(--twilight-indigo));
}
.jt-starfield > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .jt-starfield::after {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(1.5px 1.5px at 44% 18%, rgba(253,246,232,0.9), transparent),
      radial-gradient(1.5px 1.5px at 68% 78%, rgba(242,199,91,0.9), transparent),
      radial-gradient(1px 1px at 16% 54%, rgba(253,246,232,0.8), transparent);
    opacity: 0.55;
    animation: jtTwinkle 4.5s var(--ease-soft) infinite alternate;
    pointer-events: none;
  }
}
@keyframes jtTwinkle { from { opacity: 0.2; } to { opacity: 0.7; } }

/* ---- Wordmark ---------------------------------------------------- */
.jt-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  color: var(--text-heading);
  gap: 0.18em;
}
.jt-wordmark__name {
  font-family: var(--font-serif);
  font-weight: var(--weight-600, 600);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
}
.jt-wordmark__star { color: var(--accent-gold); font-size: 0.7em; }
.jt-wordmark__sub {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 0.32em;
  color: var(--text-muted);
}
.jt-wordmark--left { align-items: flex-start; }
.jt-wordmark--gold .jt-wordmark__name { color: var(--heavenly-gold); }

/* ---- Input / Textarea -------------------------------------------- */
.jt-field { display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--font-body); }
.jt-field__label {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text-body);
}
.jt-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.jt-input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-body);
  background: var(--surface-card);
  border: var(--border-width-bold) solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.95rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
}
.jt-input::placeholder { color: var(--text-faint); }
.jt-input:hover { border-color: var(--brand-primary); }
.jt-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.jt-input[aria-invalid="true"] {
  border-color: var(--coral-red);
  box-shadow: 0 0 0 4px rgba(217,83,59,0.25);
}
.jt-input[disabled] { opacity: 0.55; cursor: not-allowed; }