/* ============================================================
   Nagula Stories — Theme (Bootstrap 5)
   Deep Forest Night + Spirit Sunbeams
   THEME-ONLY: tokens, atmosphere, typography, global primitives
   ============================================================ */

/* Fonts (high visibility) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700;800&display=swap");

:root {
  /* Typography */
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Core palette — true forest night */
  --nagula-void:   #030605;   /* deepest shadow */
  --nagula-ink:    #050a08;   /* near-black evergreen */
  --nagula-forest: #07130f;   /* deep canopy */
  --nagula-pine:   #0a1f17;   /* pine mid */
  --nagula-moss:   #2b7a56;   /* moss accent */
  --nagula-bark:   #1a120c;   /* earth/bark */
  --nagula-fog:    rgba(255, 255, 255, 0.045);

  /* Spirit light */
  --nagula-ray:   #ffe9ad;          /* beam core */
  --nagula-ray-2: #d7b56a;          /* bronze edge */
  --nagula-ray-3: rgba(255, 232, 166, 0.22);

  /* Magpie + ember */
  --nagula-magpie:   #2f5dff;  /* cobalt */
  --nagula-magpie-2: #11268f;  /* deep cobalt */
  --nagula-red:      #ff3b30;  /* ember */

  /* Bootstrap mapping (dark) */
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--nagula-ink);
  --bs-body-color: rgba(244, 248, 246, 0.92);

  --bs-primary: var(--nagula-magpie);
  --bs-secondary: #184a34;
  --bs-success: #2fbf71;
  --bs-info: #3bb1ff;
  --bs-warning: var(--nagula-ray);
  --bs-danger: var(--nagula-red);

  --bs-link-color: #b7c6ff;
  --bs-link-hover-color: #ffffff;

  --bs-border-color: rgba(255, 255, 255, 0.10);

  --bs-border-radius: 1rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-xl: 1.75rem;

  --bs-box-shadow-sm: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.45);
  --bs-box-shadow:    0 1.25rem 3.25rem rgba(0, 0, 0, 0.55);
  --bs-box-shadow-lg: 0 2.2rem 5.5rem rgba(0, 0, 0, 0.65);
}

/* ------------------------------------------------------------
   Global atmosphere: deep forest + volumetric sunbeams
------------------------------------------------------------ */
html,
body {
  height: 100%;
}

body {
  color: var(--bs-body-color);
  letter-spacing: 0.01em;

  background:
    radial-gradient(ellipse at 50% 18%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.78) 100%),
    radial-gradient(circle at 88% 8%, rgba(47, 93, 255, 0.12), transparent 55%),
    linear-gradient(180deg, var(--nagula-void) 0%, var(--nagula-forest) 42%, var(--nagula-ink) 100%);
}

/* Sunbeams layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(118deg,
      rgba(255, 232, 166, 0.00) 0%,
      rgba(255, 232, 166, 0.00) 30%,
      rgba(255, 232, 166, 0.20) 36%,
      rgba(255, 232, 166, 0.04) 42%,
      rgba(255, 232, 166, 0.16) 50%,
      rgba(255, 232, 166, 0.00) 58%,
      rgba(255, 232, 166, 0.10) 64%,
      rgba(255, 232, 166, 0.00) 73%
    ),
    linear-gradient(98deg,
      rgba(255, 232, 166, 0.00) 0%,
      rgba(255, 232, 166, 0.00) 44%,
      rgba(215, 181, 106, 0.14) 48%,
      rgba(255, 232, 166, 0.00) 55%,
      rgba(215, 181, 106, 0.10) 62%,
      rgba(255, 232, 166, 0.00) 70%
    ),
    radial-gradient(circle at 22% 16%, rgba(255, 232, 166, 0.18), transparent 54%),
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.06), transparent 58%),
    radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.04), transparent 58%);

  mix-blend-mode: screen;
  opacity: 0.92;
  filter: blur(0.3px);
}

/* Grain + ember dust */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 1px, transparent 2px) 0 0 / 32px 32px,
    radial-gradient(circle, rgba(255, 232, 166, 0.07) 0 1px, transparent 2px) 11px 9px / 46px 46px,
    radial-gradient(circle, rgba(255, 59, 48, 0.045) 0 1px, transparent 2px) 21px 19px / 64px 64px;

  opacity: 0.22;
  mix-blend-mode: overlay;
}

/* ------------------------------------------------------------
   Typography + links
------------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
.display-font {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

a {
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

/* Utility accents */
.text-magpie { color: #c6d2ff !important; }
.text-gold   { color: var(--nagula-ray) !important; }
.text-forest { color: #a8f1d1 !important; }

/* ------------------------------------------------------------
   Buttons
------------------------------------------------------------ */
.btn {
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.btn-primary {
  border: 1px solid rgba(183, 198, 255, 0.18);
  background: linear-gradient(135deg, var(--nagula-magpie), var(--nagula-magpie-2));
  box-shadow:
    0 1.25rem 2.9rem rgba(47, 93, 255, 0.22),
    0 0 0 0.2rem rgba(47, 93, 255, 0.10);
}

.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 1.55rem 3.35rem rgba(47, 93, 255, 0.28),
    0 0 0 0.25rem rgba(255, 232, 166, 0.10);
}

.btn-warning {
  border: 1px solid rgba(255, 232, 166, 0.30);
  background: linear-gradient(135deg, var(--nagula-ray), var(--nagula-ray-2));
  color: rgba(3, 6, 5, 0.94);
  box-shadow: 0 1.25rem 2.9rem rgba(255, 232, 166, 0.18);
}

.btn-warning:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(183, 198, 255, 0.38);
  background: rgba(47, 93, 255, 0.10);
  backdrop-filter: blur(6px);
}

.btn-outline-primary:hover {
  background: linear-gradient(135deg, var(--nagula-magpie), var(--nagula-magpie-2));
  border-color: rgba(255, 232, 166, 0.22);
  box-shadow: 0 0 0 0.25rem rgba(47, 93, 255, 0.18);
}

/* ------------------------------------------------------------
   Cards / panels
------------------------------------------------------------ */
.card {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--bs-border-radius-xl);
  box-shadow: var(--bs-box-shadow-sm);
  color: rgba(244, 248, 246, 0.90);

  background:
    radial-gradient(circle at 18% 10%, rgba(255, 232, 166, 0.10), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(47, 93, 255, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(7, 19, 15, 0.72), rgba(3, 6, 5, 0.80));

  backdrop-filter: blur(10px);
}

/* ------------------------------------------------------------
   Forms
------------------------------------------------------------ */
.form-control,
.form-select {
  border-radius: 1rem;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(3, 6, 5, 0.42);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.46);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(255, 232, 166, 0.55);
  box-shadow: 0 0 0 0.28rem rgba(255, 232, 166, 0.14);
  background: rgba(3, 6, 5, 0.56);
}

/* ------------------------------------------------------------
   Badges / tags
------------------------------------------------------------ */
.badge {
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.badge.tag {
  background: rgba(3, 6, 5, 0.42);
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 232, 166, 0.18);
  backdrop-filter: blur(10px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.badge.tag-danger {
  background: rgba(255, 59, 48, 0.10);
  color: rgba(255, 210, 206, 0.92);
  border: 1px solid rgba(255, 59, 48, 0.22);
}

.badge-gold {
  background: linear-gradient(135deg, rgba(255, 232, 166, 0.95), rgba(215, 181, 106, 0.95));
  color: rgba(3, 6, 5, 0.94);
  border: 1px solid rgba(255, 232, 166, 0.28);
}

.badge-magpie {
  background: linear-gradient(135deg, rgba(47, 93, 255, 0.30), rgba(17, 38, 143, 0.35));
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(183, 198, 255, 0.22);
  backdrop-filter: blur(10px);
}

/* ------------------------------------------------------------
   Footer
------------------------------------------------------------ */
.site-footer {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 232, 166, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(3, 6, 5, 0.96), rgba(7, 19, 15, 0.96));

  color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(255, 232, 166, 0.10);
}

.site-footer a {
  color: rgba(255, 232, 166, 0.92);
}

.site-footer a:hover {
  color: #fff;
}

.site-footer__link {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}

.site-footer__link:hover {
  text-decoration: underline;
  opacity: 1;
}

/* Feather divider */
.hr-feather {
  height: 2px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 232, 166, 0.95),
    rgba(47, 93, 255, 0.60),
    rgba(255, 232, 166, 0.95),
    transparent
  );
  opacity: 0.90;
}

/* ------------------------------------------------------------
   Small polish: selection + focus rings on dark
------------------------------------------------------------ */
::selection {
  background: rgba(255, 232, 166, 0.22);
  color: rgba(255, 255, 255, 0.96);
}

:focus-visible {
  outline: 2px solid rgba(255, 232, 166, 0.55);
  outline-offset: 3px;
}