/* =============================================================
   Drawbridge Theme — "Dark Sleek"
   Elevated for a high-end, luxurious dark mode experience.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* === SURFACES === */
  --db-bg:            #0f0f11;
  --db-surface:       #18181b;
  --db-surface-low:   #202024;
  --db-surface-high:  #27272a;
  --db-card:          #18181b;
  --db-glass-bg:      rgba(15, 15, 17, 0.85);
  --db-glass-border:  rgba(255, 255, 255, 0.08);

  /* === TEXT === */
  --db-text:          #f4f4f5;
  --db-text-muted:    #a1a1aa;
  --db-text-dim:      #71717a;
  --db-outline:       #27272a;
  --db-outline-strong:#3f3f46;

  /* === BRAND === */
  --db-brick:         #e11d48;   /* primary action — vibrant sleek crimson */
  --db-brick-deep:    #be123c;
  --db-brick-soft:    rgba(225, 29, 72, 0.15);
  --db-brick-grad:    linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #be123c 100%);
  --db-gold:          #c8a96a;   /* architectural — metallic gold */
  --db-gold-bright:   #e8c872;
  --db-gold-grad:     linear-gradient(135deg, #e8c872 0%, #c8a96a 50%, #a17f43 100%);
  --db-hearth:        #10b981;   /* open / available — emerald */
  --db-hearth-soft:   rgba(16, 185, 129, 0.15);
  --db-cream:         #27272a;
  --db-rose-dust:     #fda4af;
  --db-rose-soft:     rgba(253, 164, 175, 0.12);

  /* === TEXTURES === */
  --db-noise:         url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.04"/%3E%3C/svg%3E');

  /* === STATE === */
  --db-open:          var(--db-hearth);
  --db-closed:        var(--db-brick);
  --db-sold-out:      #e11d48;

  /* === TYPOGRAPHY === */
  --db-font-serif:    'Playfair Display', Georgia, serif;
  --db-font-body:     'Outfit', system-ui, -apple-system, sans-serif;
  --db-caps:          0.15em;
  --db-tight:         -0.01em;

  /* === GEOMETRY === */
  --db-radius-sm:     0.75rem;
  --db-radius-md:     1.25rem;
  --db-radius-lg:     2rem;
  --db-radius-pill:   9999px;
  --db-shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
  --db-shadow-card:   0 8px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);
  --db-shadow-hover:  0 16px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
  --db-shadow-raised: 0 -10px 40px rgba(0,0,0,0.6);

  /* === MOTION === */
  --db-ease:          cubic-bezier(0.25, 1, 0.3, 1);
  --db-quick:         200ms;
  --db-base:          400ms;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body.db {
  margin: 0;
  font-family: var(--db-font-body);
  background: var(--db-bg);
  background-image: radial-gradient(circle at 50% 0%, rgba(225, 29, 72, 0.04) 0%, transparent 60%);
  color: var(--db-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Headings ---- */
.db h1, .db h2, .db h3, .db-serif {
  font-family: var(--db-font-serif);
  font-weight: 500;
  letter-spacing: var(--db-tight);
  color: var(--db-text);
  line-height: 1.15;
}

/* ---- Eyebrow / category label ---- */
.db-eyebrow {
  font-family: var(--db-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--db-caps);
  color: var(--db-gold);
}

/* ---- Cards ---- */
.db-card {
  background: var(--db-card);
  border: 1px solid var(--db-outline);
  border-radius: var(--db-radius-md);
  box-shadow: var(--db-shadow-card);
  transition: border-color var(--db-base) var(--db-ease),
              box-shadow var(--db-base) var(--db-ease),
              transform var(--db-base) var(--db-ease);
}
.db-card:hover { 
  border-color: var(--db-glass-border); 
  box-shadow: var(--db-shadow-hover);
  transform: translateY(-2px);
}

/* ---- Buttons (premium orbital) ---- */
.db-btn {
  --ring:      var(--db-gold);
  --ring-soft: rgba(212, 175, 55, 0.2);
  position: relative;
  isolation: isolate;
  font-family: var(--db-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  border-radius: var(--db-radius-pill);
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: background var(--db-quick) var(--db-ease),
              color var(--db-quick) var(--db-ease),
              border-color var(--db-quick) var(--db-ease),
              box-shadow var(--db-base) var(--db-ease),
              transform var(--db-quick) var(--db-ease);
  -webkit-tap-highlight-color: transparent;
}
.wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px 80px;
  }
.db-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--db-radius-pill);
  border: 1px solid var(--ring);
  opacity: 0.3;
  transform: scale(0.96);
  transition: opacity var(--db-base) var(--db-ease),
              transform var(--db-base) var(--db-ease);
  pointer-events: none;
}
.db-btn:hover { box-shadow: 0 0 0 4px var(--ring-soft), var(--db-shadow-sm); }
.db-btn:hover::after { opacity: 0.8; transform: scale(1); }
.db-btn:active { transform: translateY(1px) scale(0.98); }
.db-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring-soft); }
.db-btn:focus-visible::after { opacity: 0.8; transform: scale(1); }

.db-btn-primary {
  --ring: var(--db-brick);
  --ring-soft: rgba(225, 29, 72, 0.25);
  background: var(--db-brick);
  color: #fff;
}
.db-btn-primary:hover { background: var(--db-brick-deep); }

.db-btn-secondary {
  --ring: var(--db-gold);
  background: transparent;
  color: var(--db-gold);
  border-color: var(--db-gold);
}
.db-btn-secondary:hover { background: var(--db-gold); color: #18181b; }

.db-btn-ghost {
  --ring: var(--db-outline-strong);
  --ring-soft: rgba(255,255,255,0.05);
  background: var(--db-surface-low);
  color: var(--db-text);
}
.db-btn-ghost:hover { background: var(--db-surface-high); }

.db-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.db-btn:disabled::after { display: none; }

@keyframes db-orbit-pulse {
  0%   { box-shadow: 0 0 0 0 var(--ring-soft); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.db-btn--orbit { animation: db-orbit-pulse 2.6s var(--db-ease) infinite; }
.db-btn--orbit:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .db-btn--orbit { animation: none; } }

/* ---- Pills ---- */
.db-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--db-font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.8rem;
  border-radius: var(--db-radius-pill);
}
.db-pill--open    { background: var(--db-hearth-soft); color: var(--db-hearth); }
.db-pill--closed  { background: var(--db-brick-soft);  color: var(--db-brick); }
.db-pill--gold    { background: rgba(212, 175, 55, 0.15); color: var(--db-gold); }
.db-pill--soldout { background: var(--db-brick-soft);  color: var(--db-sold-out); }
.db-pill--rose    { background: var(--db-rose-soft);   color: var(--db-rose-dust); }

/* ---- Inputs ---- */
.db-input {
  width: 100%;
  font-family: var(--db-font-body);
  font-size: 1rem;
  color: var(--db-text);
  background: var(--db-surface-low);
  border: 1px solid transparent;
  border-radius: var(--db-radius-sm);
  padding: 0.85rem 1rem;
  transition: all var(--db-quick) var(--db-ease);
}
.db-input:hover { background: var(--db-surface-high); }
.db-input:focus { outline: none; background: var(--db-card); border-color: var(--db-gold); box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15); }

/* ---- Divider ---- */
.db-divider { height: 1px; background: var(--db-outline); border: 0; margin: 1.5rem 0; }