/*
 * ═══════════════════════════════════════════════════════════════════════════
 * PatronHubDevs — Global Theme  (Design System v1.0)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * THIS FILE IS THE SINGLE SOURCE OF TRUTH.
 * All old hardcoded colours (#39ff14, #121212, #1a1a1a …) must be replaced
 * with the tokens defined here.  style.css is kept for backward-compat class
 * names only; it imports this file and uses these variables.
 *
 * Sections
 *  1.  Design Tokens  (CSS Custom Properties)
 *  2.  Font Imports   (Syne · Inter · DM Mono)
 *  3.  Base / Reset
 *  4.  Typography
 *  5.  Keyframes      (controlled — one per purpose)
 *  6.  Layout helpers
 *  7.  Navbar
 *  8.  Buttons        (.btn .btn-primary .btn-secondary .btn-ghost)
 *  9.  Cards          (.card .card-featured + legacy aliases)
 * 10.  Page Header
 * 11.  Forms          (.form-input .form-label)
 * 12.  Badges / Tags
 * 13.  Footer
 * 14.  Utilities
 * 15.  Glow System    (controlled — 3 levels only)
 * 16.  Responsive
 * 17.  Reduced-motion
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ─────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Backgrounds (4-step depth system) ────────────────────────────────── */
  --bg-primary:         #0a0c0f;
  --bg-secondary:       #0f1318;
  --bg-surface:         #141920;
  --bg-elevated:        #1a2030;
  --bg-overlay:         #1f2840;

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --border-subtle:      rgba(255,255,255,0.06);
  --border-default:     rgba(255,255,255,0.10);
  --border-strong:      rgba(255,255,255,0.18);

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --text-primary:       #e8edf2;
  --text-secondary:     #8a96a8;
  --text-muted:         #4a5568;
  --text-inverse:       #0a0c0f;

  /* ── Accent (neon green — use sparingly) ───────────────────────────────── */
  --accent:             #39ff14;
  --accent-dim:         #2ecc10;
  --accent-muted:       #1a7a0a;
  --accent-ghost:       rgba(57,255,20,0.07);

  /* ── Glow levels (3 tiers — see Section 15) ───────────────────────────── */
  --glow-low:           0 0  8px rgba(57,255,20,0.18);
  --glow-med:           0 0 16px rgba(57,255,20,0.28);
  --glow-high:          0 0 32px rgba(57,255,20,0.40);

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --success:            #22c55e;
  --success-bg:         rgba(34,197,94,0.08);
  --warning:            #f59e0b;
  --warning-bg:         rgba(245,158,11,0.08);
  --error:              #ef4444;
  --error-bg:           rgba(239,68,68,0.08);
  --info:               #3b82f6;
  --info-bg:            rgba(59,130,246,0.08);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-display:       'Syne', 'Rajdhani', sans-serif;
  --font-body:          'Inter', 'Rajdhani', sans-serif;
  --font-mono:          'DM Mono', 'Roboto Mono', monospace;

  --text-xs:            0.700rem;
  --text-sm:            0.813rem;
  --text-base:          0.938rem;
  --text-md:            1.063rem;
  --text-lg:            1.250rem;
  --text-xl:            1.500rem;
  --text-2xl:           2.000rem;
  --text-3xl:           2.750rem;
  --text-4xl:           3.750rem;

  /* ── Spacing ───────────────────────────────────────────────────────────── */
  --space-1:            0.25rem;
  --space-2:            0.50rem;
  --space-3:            0.75rem;
  --space-4:            1.00rem;
  --space-5:            1.25rem;
  --space-6:            1.50rem;
  --space-8:            2.00rem;
  --space-10:           2.50rem;
  --space-12:           3.00rem;
  --space-16:           4.00rem;

  /* legacy aliases (keep for backward compat with style.css) */
  --space-xs:           var(--space-1);
  --space-sm:           var(--space-2);
  --space-md:           var(--space-4);
  --space-lg:           var(--space-6);
  --space-xl:           var(--space-8);
  --space-2xl:          var(--space-12);

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-pill:        999px;

  /* ── Transitions ───────────────────────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;

  /* ── Legacy variable bridge (old templates reference these) ────────────── */
  --neon-green:         var(--accent);
  --dark-bg:            var(--bg-primary);
  --dark-card:          var(--bg-surface);
  --dark-border:        var(--border-default);
  --text-light:         var(--text-primary);
}


/* ─────────────────────────────────────────────────────────────────────────
   2. FONT IMPORTS
   ───────────────────────────────────────────────────────────────────────── */
/* Loaded in base.html <head> — no @import here to avoid FOUC */


/* ─────────────────────────────────────────────────────────────────────────
   3. BASE / RESET
   ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family:            var(--font-body);
  background-color:       var(--bg-primary);
  color:                  var(--text-primary);
  font-size:              var(--text-base);
  line-height:            1.65;
  -webkit-font-smoothing: antialiased;
  letter-spacing:         0.01em;
  overflow-x:             hidden;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover { text-decoration: none; }

img {
  max-width:   100%;
  height:      auto;
  pointer-events:        none;
  -webkit-user-drag:     none;
  user-drag:             none;
}


/* ─────────────────────────────────────────────────────────────────────────
   4. TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-display);
  font-weight:    700;
  color:          var(--text-primary);
  letter-spacing: -0.02em;
  line-height:    1.15;
}

h1 { font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); font-weight: 800; }
h2 { font-size: clamp(var(--text-xl),  4vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); font-weight: 600; }
h4 { font-size: var(--text-lg); font-weight: 600; }
h5 { font-size: var(--text-md); font-weight: 600; }
h6 { font-size: var(--text-base); font-weight: 600; }

p {
  font-family:  var(--font-body);
  color:        var(--text-secondary);
  line-height:  1.7;
}

/* eyebrow / mono label used across all pages */
.eyebrow {
  font-family:     var(--font-mono);
  font-size:       var(--text-xs);
  color:           var(--accent);
  letter-spacing:  0.14em;
  text-transform:  uppercase;
}

code, pre {
  font-family: var(--font-mono);
  font-size:   13px;
}

code {
  background:    var(--accent-ghost);
  color:         var(--accent);
  padding:       2px 7px;
  border-radius: var(--radius-sm);
}


/* ─────────────────────────────────────────────────────────────────────────
   5. KEYFRAMES  (ONE per purpose — no duplicates)
   ───────────────────────────────────────────────────────────────────────── */

/* Dot / logo pulse */
@keyframes ds-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.7; transform: scale(0.85); }
}

/* Fade-up entry — replaces slideFadeGlow (less aggressive) */
@keyframes ds-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Neon gradient shift — hero accent word only */
@keyframes ds-neon-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Footer accent line */
@keyframes ds-flow {
  0%   { background-position: 0%   0%; }
  100% { background-position: 300% 0%; }
}


/* ─────────────────────────────────────────────────────────────────────────
   6. LAYOUT HELPERS
   ───────────────────────────────────────────────────────────────────────── */

/* Fade-up entrance (replaces .fade-in) — softer, less translation */
.fade-in {
  opacity:         0;
  transform:       translateY(20px);
  animation:       ds-fade-up 0.55s ease-out forwards;
}

/* Hero child stagger */
.hero-text-section p,
.hero-features span,
.hero-buttons a {
  opacity:   0;
  transform: translateY(16px);
  animation: ds-fade-up 0.6s ease-out forwards;
}
.hero-text-section p  { animation-delay: 0.2s; }
.hero-features span   { animation-delay: 0.4s; }
.hero-buttons a       { animation-delay: 0.6s; }

/* Dividers */
.divider {
  height:     1px;
  background: var(--border-subtle);
  margin:     var(--space-8) 0;
}

.section-rule {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  margin-bottom: var(--space-6);
}
.section-rule::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border-subtle);
}

/* Status dots */
.status-dot {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   var(--text-sm);
}
.status-dot::before {
  content:       '';
  width:         6px;
  height:        6px;
  border-radius: 50%;
  flex-shrink:   0;
}
.status-dot.active::before  { background: var(--success); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.status-dot.warning::before { background: var(--warning); }
.status-dot.muted::before   { background: var(--text-muted); }


/* ─────────────────────────────────────────────────────────────────────────
   7. NAVBAR
   ───────────────────────────────────────────────────────────────────────── */
.navbar {
  background:   var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding:      0.625rem 0;
  transition:   background var(--transition-base),
                box-shadow  var(--transition-base);
}

.navbar.scrolled {
  background:  rgba(15,19,24,0.96) !important;
  box-shadow:  0 1px 20px rgba(0,0,0,0.4);
}

/* Brand */
.navbar-brand {
  font-family:    var(--font-display);
  font-size:      var(--text-lg);
  font-weight:    700;
  color:          var(--text-primary) !important;
  letter-spacing: -0.02em;
  display:        flex;
  align-items:    center;
  gap:            8px;
  transition:     opacity var(--transition-fast);
}
.navbar-brand:hover { opacity: 0.85; }

/* Logo dot */
.navbar-brand .ds-logo-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--accent);
  box-shadow:    var(--glow-med);
  flex-shrink:   0;
  animation:     ds-pulse 2.4s ease-in-out infinite;
}

/* The "Devs" accent word in brand */
.brand-text .accent-word { color: var(--accent); }

/* Nav links — override Bootstrap */
.navbar-nav .nav-link {
  font-family:   var(--font-body);
  font-size:     var(--text-sm);
  font-weight:   500;
  color:         var(--text-secondary) !important;
  padding:       6px 14px !important;
  border-radius: var(--radius-md);
  letter-spacing: 0.01em;
  transition:    color var(--transition-fast),
                 background var(--transition-fast);
  position:      relative;
}

/* Remove old underline pseudo-element */
.navbar-nav .nav-link::after { display: none !important; }

.navbar-nav .nav-link:hover {
  color:      var(--text-primary) !important;
  background: var(--bg-elevated);
}

.navbar-nav .nav-link.active {
  color:      var(--accent) !important;
  background: var(--accent-ghost);
}

/* Hamburger */
.navbar-toggler {
  border-color:    var(--border-default);
  padding:         6px 10px;
  border-radius:   var(--radius-md);
}
.navbar-toggler:focus { box-shadow: 0 0 0 2px var(--accent-ghost); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23e8edf2' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* ─────────────────────────────────────────────────────────────────────────
   8. BUTTONS
   Rules:
   • btn-primary  → accent fill  — purchase / confirm / primary CTA
   • btn-secondary→ elevated fill — navigate / cancel
   • btn-ghost    → transparent  — secondary brand-signal action
   • btn-danger   → error fill   — destructive only
   • OLD aliases  → map to new system
   ───────────────────────────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     500;
  padding:         9px 20px;
  border-radius:   var(--radius-md);
  border:          1px solid transparent;
  cursor:          pointer;
  transition:      all var(--transition-fast);
  letter-spacing:  0.02em;
  text-decoration: none;
  white-space:     nowrap;
  line-height:     1;
}
.btn i { font-size: 0.85em; }

/* Primary */
.btn-primary,
.btn-glow {
  background:   var(--accent) !important;
  color:        var(--text-inverse) !important;
  border-color: var(--accent) !important;
  font-weight:  600;
}
.btn-primary:hover,
.btn-glow:hover {
  background:   var(--accent-dim) !important;
  border-color: var(--accent-dim) !important;
  box-shadow:   var(--glow-med);
  transform:    translateY(-1px);
  color:        var(--text-inverse) !important;
  text-decoration: none;
}
.btn-primary:active,
.btn-glow:active {
  transform:  translateY(0);
  box-shadow: none;
}

/* Secondary */
.btn-secondary {
  background:   var(--bg-elevated);
  color:        var(--text-primary);
  border-color: var(--border-default);
}
.btn-secondary:hover {
  background:   var(--bg-overlay);
  border-color: var(--border-strong);
  color:        var(--text-primary);
}

/* Ghost (replaces .btn-outline-glow) */
.btn-ghost,
.btn-outline-glow {
  background:   transparent !important;
  color:        var(--accent) !important;
  border-color: rgba(57,255,20,0.25) !important;
}
.btn-ghost:hover,
.btn-outline-glow:hover {
  background:   var(--accent-ghost) !important;
  border-color: rgba(57,255,20,0.45) !important;
  box-shadow:   var(--glow-low);
  color:        var(--accent) !important;
  text-decoration: none;
}

/* Danger */
.btn-danger {
  background:   var(--error-bg);
  color:        var(--error);
  border-color: rgba(239,68,68,0.25);
}
.btn-danger:hover {
  background:   rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.45);
  color:        var(--error);
}

/* Size variants */
.btn-sm { padding: 6px 14px; font-size: var(--text-xs); }
.btn-lg { padding: 12px 28px; font-size: var(--text-md); }

/* Disabled */
.btn:disabled,
.btn[disabled],
.btn.disabled {
  opacity:        0.35;
  cursor:         not-allowed;
  pointer-events: none;
  transform:      none !important;
  box-shadow:     none !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   9. CARDS
   • .card            → base surface card
   • .card-featured   → accent-bordered featured card
   • Legacy aliases   → .project-card .about-box .donation-card etc.
   ───────────────────────────────────────────────────────────────────────── */
.card {
  background:    var(--bg-surface);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding:       var(--space-6);
  transition:    border-color var(--transition-base),
                 transform    var(--transition-base);
  position:      relative;
  overflow:      hidden;
}
.card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(57,255,20,0.15), transparent);
  opacity:    0;
  transition: opacity var(--transition-base);
}
.card:hover {
  border-color: var(--border-strong);
  transform:    translateY(-2px);
}
.card:hover::before { opacity: 1; }

.card-featured {
  border-color: rgba(57,255,20,0.22) !important;
}
.card-featured::before { opacity: 1; }
.card-featured:hover   { border-color: rgba(57,255,20,0.40) !important; }

/* Card anatomy */
.card-icon {
  width:         40px;
  height:        40px;
  background:    var(--accent-ghost);
  border:        1px solid rgba(57,255,20,0.2);
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size:     18px;
}

.card-title {
  font-family:    var(--font-display);
  font-size:      var(--text-md);
  font-weight:    600;
  color:          var(--text-primary);
  margin-bottom:  var(--space-2);
  letter-spacing: -0.01em;
}

.card-desc {
  font-size:     var(--text-sm);
  color:         var(--text-secondary);
  line-height:   1.6;
  margin-bottom: var(--space-5);
}

.card-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     var(--space-4);
  border-top:      1px solid var(--border-subtle);
}

.card-price {
  font-family:   var(--font-display);
  font-size:     var(--text-lg);
  font-weight:   700;
  color:         var(--text-primary);
}

.card-price-free { color: var(--accent); }

/* ── Legacy card aliases (kept for old templates) ─────────────────────── */
.project-card,
.about-box,
.donation-card,
.crypto-box,
.contribute-box {
  background:    var(--bg-surface);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition:    border-color var(--transition-base),
                 transform    var(--transition-base);
}

.project-card:hover,
.about-box:hover,
.donation-card:hover {
  border-color: rgba(57,255,20,0.3);
  box-shadow:   0 4px 24px rgba(57,255,20,0.06);
  transform:    translateY(-2px);
}

/* project-card-large (horizontal blog/product row) */
.project-card-large {
  background:    var(--bg-surface);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:    border-color var(--transition-base),
                 box-shadow   var(--transition-base);
  position:      relative;
}
.project-card-large::before {
  content:    '';
  position:   absolute;
  left:       0; top: 0; bottom: 0;
  width:      2px;
  background: transparent;
  transition: background var(--transition-base);
}
.project-card-large:hover {
  border-color: rgba(57,255,20,0.22);
  box-shadow:   0 4px 24px rgba(0,0,0,0.3), var(--glow-low);
}
.project-card-large:hover::before { background: var(--accent); }

.project-image-large {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bg-primary);
  border-right:    1px solid var(--border-subtle);
  min-height:      180px;
}
.project-image-large img {
  max-width:   85%;
  max-height:  200px;
  object-fit:  contain;
  padding:     var(--space-4);
  transition:  transform var(--transition-base);
}
.project-card-large:hover .project-image-large img { transform: scale(1.03); }

.project-overlay-large {
  position: absolute;
  top:      10px;
  left:     10px;
}

.project-content-large { padding: var(--space-6); }

/* value-card / support-card */
.value-card,
.support-card {
  background:    var(--bg-elevated);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition:    border-color var(--transition-base),
                 transform    var(--transition-base);
}
.value-card:hover,
.support-card:hover {
  border-color: rgba(57,255,20,0.25);
  transform:    translateY(-3px);
}

/* tool-card / post-card / border-neon variants */
.tool-card,
.post-card {
  background:    var(--bg-surface);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition:    border-color var(--transition-base),
                 transform    var(--transition-base);
}
.tool-card:hover,
.post-card:hover {
  border-color: rgba(57,255,20,0.28);
  transform:    translateY(-2px);
}

/* Legacy neon-border card aliases */
.card.border-neon,
.tool-card.border-neon {
  border-color: rgba(57,255,20,0.22);
}
.card.border-neon:hover,
.tool-card.border-neon:hover {
  border-color: rgba(57,255,20,0.40);
  box-shadow:   var(--glow-low);
}


/* ─────────────────────────────────────────────────────────────────────────
   10. PAGE HEADER
   ───────────────────────────────────────────────────────────────────────── */
.page-header {
  padding-top:  100px;
  padding-bottom: var(--space-8);
  background:   var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  position:     relative;
  overflow:     hidden;
}

/* Subtle radial gradient at top — hero eyebrow from design system */
.page-header::before {
  content:    '';
  position:   absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width:      700px;
  height:     250px;
  background: radial-gradient(ellipse at 50% 0%, rgba(57,255,20,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Hero eyebrow (the mono label above h1) */
.page-header .hero-eyebrow,
.page-header > .container > .row > * > p[style*="Roboto Mono"],
.page-header > .container .eyebrow {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  color:          var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            10px;
  margin-bottom:  var(--space-5);
}

/* Hero headline .hl accent — high glow, used once per hero */
.glow-text .hl,
h1 .hl,
h2 .hl,
.hero-headline .hl {
  color:       var(--accent);
  text-shadow: 0 0 40px rgba(57,255,20,0.25);
}


/* ─────────────────────────────────────────────────────────────────────────
   11. GLOW TEXT  (.glow-text — controlled single animation)
   ───────────────────────────────────────────────────────────────────────── */
.glow-text,
.neon-text {
  display:     inline-block;
  font-weight: 700;
  color:       var(--accent);
  /* Subtle gradient on the accent word — not on everything */
  background:       linear-gradient(270deg, var(--accent), var(--accent-dim), var(--accent));
  background-size:  300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:  text;
  animation:        ds-neon-shift 6s ease infinite;
  /* No multi-layer text-shadow spam — glow from background gradient only */
}
/* Remove the pseudo-element drop-shadow from old style.css */
.glow-text::after,
.neon-text::after { display: none !important; }


/* ─────────────────────────────────────────────────────────────────────────
   12. FORMS  (.form-input replaces raw .form-control overrides)
   ───────────────────────────────────────────────────────────────────────── */
.form-label,
label.form-label {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  font-weight:    500;
  color:          var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom:  6px;
  display:        block;
}

.form-input,
.form-control {
  background:    var(--bg-surface) !important;
  border:        1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding:       9px 14px !important;
  font-family:   var(--font-body) !important;
  font-size:     var(--text-sm) !important;
  color:         var(--text-primary) !important;
  outline:       none;
  width:         100%;
  transition:    border-color var(--transition-fast),
                 box-shadow   var(--transition-fast);
}
.form-input::placeholder,
.form-control::placeholder { color: var(--text-muted) !important; }

.form-input:hover,
.form-control:hover {
  border-color: var(--border-strong) !important;
}

.form-input:focus,
.form-control:focus {
  border-color: rgba(57,255,20,0.45) !important;
  box-shadow:   0 0 0 3px rgba(57,255,20,0.08) !important;
}

.form-input.error,
.form-control.is-invalid {
  border-color: rgba(239,68,68,0.45) !important;
}

.form-input:disabled,
.form-control:disabled {
  opacity:        0.4;
  cursor:         not-allowed;
}

.form-hint {
  font-size: 11.5px;
  color:     var(--text-muted);
  margin-top: 4px;
}

.form-error-text {
  font-size: 11.5px;
  color:     var(--error);
  margin-top: 4px;
}

/* Textarea */
textarea.form-input,
textarea.form-control {
  resize:      vertical;
  min-height:  120px;
  line-height: 1.6;
}

/* Select */
select.form-input,
select.form-control,
.form-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%238a96a8'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 12px center !important;
  padding-right:       36px !important;
  appearance:          none;
  -webkit-appearance:  none;
}


/* ─────────────────────────────────────────────────────────────────────────
   13. BADGES / TAGS  (mono labels — used on cards, products, hub)
   ───────────────────────────────────────────────────────────────────────── */
.card-badge,
.tag-mono,
.badge-mono {
  display:       inline-block;
  font-family:   var(--font-mono);
  font-size:     10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:       3px 8px;
  border-radius: var(--radius-pill);
  font-weight:   600;
}

.badge-flagship { background: var(--accent-ghost);  color: var(--accent);   border: 1px solid rgba(57,255,20,0.2); }
.badge-new      { background: var(--info-bg);        color: var(--info);     border: 1px solid rgba(59,130,246,0.2); }
.badge-coming   { background: var(--warning-bg);     color: var(--warning);  border: 1px solid rgba(245,158,11,0.2); }
.badge-free     { background: var(--accent-ghost);  color: var(--accent);   border: 1px solid rgba(57,255,20,0.2); }

/* Feature list */
.feature-list {
  list-style: none;
  padding:    0;
}
.feature-list li {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  padding:     var(--space-2) 0;
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
}
.feature-list i { flex-shrink: 0; color: var(--success); margin-top: 3px; }

/* Filter pills (products + hub pages) */
.filter-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  padding:        5px 14px;
  border-radius:  var(--radius-pill);
  border:         1px solid var(--border-default);
  background:     transparent;
  color:          var(--text-secondary);
  cursor:         pointer;
  transition:     all var(--transition-fast);
  text-decoration: none;
  white-space:    nowrap;
}
.filter-pill:hover,
.filter-pill.active {
  border-color: rgba(57,255,20,0.45);
  color:        var(--accent);
  background:   var(--accent-ghost);
  text-decoration: none;
}

/* Tech stack badges */
.tech-badge,
.tech-stack .badge,
.tech-badges .badge {
  font-family:   var(--font-mono);
  font-size:     var(--text-xs);
  background:    var(--bg-elevated);
  border:        1px solid var(--border-subtle);
  color:         var(--text-secondary);
  padding:       3px 9px;
  border-radius: var(--radius-sm);
  transition:    border-color var(--transition-fast),
                 color        var(--transition-fast);
}
.tech-badge:hover,
.tech-badges .badge:hover {
  border-color: rgba(57,255,20,0.3);
  color:        var(--accent);
}


/* ─────────────────────────────────────────────────────────────────────────
   14. FOOTER
   ───────────────────────────────────────────────────────────────────────── */
.footer {
  background:  var(--bg-secondary);
  border-top:  1px solid var(--border-subtle);
  padding-top: var(--space-12);
  position:    relative;
}

/* Single thin accent line at top — LOW glow only */
.footer::before {
  content:  '';
  position: absolute;
  top:      0; left: 0;
  width:    100%;
  height:   1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(57,255,20,0.4) 30%,
    rgba(57,255,20,0.6) 50%,
    rgba(57,255,20,0.4) 70%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: ds-flow 8s linear infinite;
}
/* Remove the animated blurry line from old style.css */
.footer::after { display: none !important; }
.footer:hover  { box-shadow: none !important; }

.footer h5 {
  font-family:   var(--font-display);
  font-size:     var(--text-md);
  font-weight:   600;
  color:         var(--text-primary);
  margin-bottom: var(--space-4);
}

.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: var(--space-2); }
.footer-links a {
  font-size:   var(--text-sm);
  color:       var(--text-muted);
  transition:  color var(--transition-fast);
  display:     flex;
  align-items: center;
  gap:         6px;
}
.footer-links a:hover { color: var(--accent); }

.social-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-md);
  border:          1px solid var(--border-default);
  color:           var(--text-secondary);
  font-size:       1rem;
  transition:      color       var(--transition-fast),
                   border-color var(--transition-fast),
                   background   var(--transition-fast);
}
.social-icon:hover {
  color:        var(--accent);
  border-color: rgba(57,255,20,0.35);
  background:   var(--accent-ghost);
}

/* Stat boxes (homepage) */
.stat-box { padding: var(--space-6); text-align: center; }
.stat-icon {
  font-size:     2.5rem;
  color:         var(--accent);
  margin-bottom: var(--space-4);
  opacity:       0.75;
}


/* ─────────────────────────────────────────────────────────────────────────
   15. GLOW SYSTEM  (controlled — use sparingly)
   ───────────────────────────────────────────────────────────────────────── */

/*
 * LOW   → ghost buttons, sidebar active, subtle borders
 * MED   → primary CTA hover, featured card border
 * HIGH  → hero headline accent word ONLY
 *
 * FORBIDDEN (see design system §11):
 *   - body text, table rows, card backgrounds, icons by default,
 *     multiple elements on the same view simultaneously
 */

/* One pulsing logo dot */
.ds-logo-dot {
  animation: ds-pulse 2.4s ease-in-out infinite;
  box-shadow: var(--glow-med);
}

/* Donation / crypto card — controlled hover only */
.crypto-card:hover {
  border-color: rgba(57,255,20,0.28);
  box-shadow:   var(--glow-low);
}
/* Remove the aggressive inset glow from old style.css */
.crypto-card:hover { box-shadow: var(--glow-low) !important; }
.crypto-card:hover i,
.support-card:hover i {
  color: var(--accent);
  /* Single-layer, low intensity only */
  text-shadow: 0 0 8px rgba(57,255,20,0.3);
}
.crypto-card:hover .wallet-address code {
  color: var(--accent);
  text-shadow: none;
}


/* ─────────────────────────────────────────────────────────────────────────
   16. RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .navbar-collapse {
    background:    var(--bg-secondary);
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-top:    var(--space-3);
    padding:       var(--space-3);
  }
  .project-content-large { padding: var(--space-4); }
}

@media (max-width: 768px) {
  .page-header { padding-top: 80px; }
  .project-card-large { flex-direction: column; }
  .project-image-large {
    border-right:  none;
    border-bottom: 1px solid var(--border-subtle);
    min-height:    140px;
  }
}

@media (max-width: 576px) {
  h1 { font-size: var(--text-2xl); }
  .btn-lg { padding: 10px 20px; font-size: var(--text-base); }
}


/* ─────────────────────────────────────────────────────────────────────────
   17. REDUCED-MOTION
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}