:root{
  --asw-radius: 18px;

  /* Base */
  --asw-bg: #f6f7fb;
  --asw-card: #ffffff;
  --asw-text: #111827;
  --asw-muted: #6b7280;
  --asw-border: rgba(17,24,39,.10);

  /* Brand (stroopwafel/caramel) */
  --asw-brand: #c68642;
  --asw-brand-2: #e6b57a;
  --asw-ink: #1f2937;
}

html, body { height: 100%; }
body { background: var(--asw-bg); color: var(--asw-text); }

a { text-decoration: none; color: inherit; }
a:hover { color: var(--asw-ink); }

.navbar { backdrop-filter: blur(10px); }

.brand-mark{
  width: 34px; height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-title{
  letter-spacing: -0.2px;
}

.brand-pill{
  border: 1px solid var(--asw-border);
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: rgba(255,255,255,.8);
}

.hero{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(198,134,66,0.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(230,181,122,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
  border-bottom: 1px solid var(--asw-border);
}

/* Waffle-ish subtle pattern for hero */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background:
    linear-gradient(45deg, rgba(17,24,39,.05) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(-45deg, rgba(17,24,39,.05) 1px, transparent 1px) 0 0/26px 26px;
  mask-image: radial-gradient(circle at 50% 0%, black 0%, transparent 60%);
}

.hero-wrap{
  position: relative;
  overflow: hidden;
}

.card{
  border-radius: var(--asw-radius);
  border: 1px solid var(--asw-border) !important;
  background: var(--asw-card) !important;
}

.table{
  border-radius: var(--asw-radius);
  overflow: hidden;
}

.text-secondary { color: var(--asw-muted) !important; }
.border-secondary { border-color: var(--asw-border) !important; }

/* Buttons */
.btn-dark{
  background: var(--asw-ink);
  border-color: var(--asw-ink);
}
.btn-dark:hover{
  filter: brightness(0.95);
}

.btn-brand{
  background: var(--asw-brand);
  border-color: var(--asw-brand);
  color: #111;
}
.btn-brand:hover{
  filter: brightness(0.98);
}

/* Safety: if any old dark classes remain */
.bg-dark, .text-bg-dark { background: transparent !important; }