/*
 * DragonHub — shared brand stylesheet.
 *
 * The Dragon DB brand: a vivid purple → magenta gradient on a dark charcoal
 * (#141414, not pure black) background. This file is the single source of truth
 * for the CSS-variable palette, the logo gradients, and the reusable component
 * classes (.card, .field, .btn-primary, .glow) used across every DragonHub UI.
 *
 * Pair it with /static/brand.js (the Tailwind CDN theme). See
 * docs/features/branding.md for the palette table and usage rules.
 */

:root {
  /* Brand palette */
  --color-background: #141414; /* charcoal — page background          */
  --color-surface: #1c1c1c;    /* cards / raised surfaces             */
  --color-border: #262626;     /* hairline borders, inputs            */
  --color-primary: #a60eef;    /* electric purple — primary actions   */
  --color-accent: #f902fb;     /* hot pink — accents / highlights     */
  --color-hover: #d508f5;      /* bright magenta — hover / active      */
  --color-deep: #8313eb;       /* deep violet — dark supporting shade  */
}

body {
  -webkit-font-smoothing: antialiased;
}

/* ---- Brand gradients (match the Dragon DB logo) ---- */
.brand-gradient {
  background: linear-gradient(
    180deg,
    #8313eb 0%,
    #a60eef 35%,
    #d508f5 70%,
    #f902fb 100%
  );
}

/* Horizontal 2-stop variant — handy for bars, underlines, borders. */
.brand-gradient-h {
  background: linear-gradient(90deg, #8313eb 0%, #f902fb 100%);
}

/* Gradient text (clip the brand gradient to the glyphs). */
.brand-text {
  background: linear-gradient(180deg, #a60eef 0%, #f902fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Brand logo ---- */
/* The Dragon DB mark (dragondb-logo.png) is the default logo everywhere; the
   FinDragon page overrides with its own .svg. These style both consistently. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.brand-mark {
  object-fit: contain;
  /* a soft purple halo lifts the transparent mark off the charcoal background */
  filter: drop-shadow(0 2px 12px rgba(166, 14, 239, 0.45));
}
.brand-wordmark {
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #a60eef 0%, #f902fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gentle idle float for hero logo marks. */
@keyframes brand-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.brand-float {
  animation: brand-float 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .brand-float { animation: none; }
}

/* ---- Reusable components ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}

.field {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 9px;
}
.field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(166, 14, 239, 0.18);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-hover);
}

/* Soft brand glow backdrop (purple, radial from top). */
.glow {
  background: radial-gradient(
    60% 60% at 50% 0%,
    rgba(166, 14, 239, 0.2),
    transparent 70%
  );
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-deep);
}