/* ===========================================================
   VeriFashion brand styling
   Serif headings (Baskervville) · gold accent · square corners
   Adapts to light and dark via prefers-color-scheme.
   =========================================================== */

:root {
  --vf-gold: #c79f39;
  --vf-gold-link: #a8842a;   /* readable gold on light surfaces */
  --vf-serif: "Baskervville", Georgia, "Times New Roman", serif;
  --vf-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Light theme (default) */
  --vf-heading: #181818;
  --vf-body: #313131;
  --vf-muted: #6b7078;
  --vf-surface: #ffffff;
  --vf-surface-alt: #fafafa;
  --vf-border: #ececec;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vf-heading: #f4f2ee;
    --vf-body: #cfcbc4;
    --vf-muted: #9a978f;
    --vf-surface: #121212;
    --vf-surface-alt: #1a1a1a;
    --vf-border: #2a2a2a;
    --vf-gold-link: #d8b95e; /* brighter gold for legibility on dark */
  }
}

[x-cloak] { display: none !important; }

/* ---- Base typography & surfaces ---- */
html, body {
  font-family: var(--vf-sans);
  color: var(--vf-body);
  background-color: var(--vf-surface);
  font-weight: 300;
}

h1, h2, h3, .title, .subtitle {
  font-family: var(--vf-serif) !important;
  color: var(--vf-heading);
}
.subtitle { color: var(--vf-body); }

/* Bulma sections/hero inherit the themed surface */
.section { background-color: transparent; }
.vf-alt-section { background-color: var(--vf-surface-alt); }

/* Square corners everywhere — matches the brand site */
.button, .box, .card, .input, .notification, .tag {
  border-radius: 0 !important;
}

/* ---- Navbar ---- */
.vf-nav {
  background-color: var(--vf-surface);
  border-bottom: 1px solid var(--vf-border);
}
.vf-nav .navbar-menu { background-color: var(--vf-surface); }
.brand-text {
  font-family: var(--vf-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--vf-heading) !important;
}
.brand-text:hover { color: var(--vf-gold) !important; background: transparent; }

.vf-navlink {
  font-family: var(--vf-serif);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--vf-gold) !important;
  font-weight: 500;
}
.vf-navlink:hover {
  background: transparent !important;
  color: var(--vf-gold-link) !important;
}

/* ---- Hero (always dark, in both themes) ---- */
.vf-hero {
  background: #181818;
  background-image:
    radial-gradient(ellipse at 70% 20%, rgba(199, 159, 57, 0.18), transparent 55%),
    linear-gradient(160deg, #000000 0%, #1d1d1d 55%, #111 100%);
  position: relative;
}
.vf-hero .title,
.vf-hero .subtitle { color: #ffffff !important; }

.vf-hero-kicker {
  font-family: var(--vf-serif);
  color: #ffffff;
  font-weight: 100;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.2;
}
.vf-hero-gold {
  color: var(--vf-gold) !important;
  font-weight: 400;
}
.vf-hero-sub {
  font-family: var(--vf-sans);
  color: #d9d9d9 !important;
  font-weight: 300;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Buttons ---- */
.vf-btn-gold {
  background: var(--vf-gold);
  border: 1px solid var(--vf-gold);
  color: #1a1a1a;
  font-family: var(--vf-sans);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 1.4rem 2.2rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.vf-btn-gold:hover {
  background: #d8b95e;
  border-color: #d8b95e;
  color: #1a1a1a;
}
.vf-btn-outline {
  background: transparent;
  border: 1px solid var(--vf-gold);
  color: var(--vf-gold);
  font-family: var(--vf-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.vf-btn-outline:hover {
  background: var(--vf-gold);
  color: #1a1a1a;
  border-color: var(--vf-gold);
}

.app-store-badge img { transition: transform 0.15s ease; }
.app-store-badge:hover img { transform: scale(1.04); }

/* ---- Feature section ---- */
.vf-feature-num {
  font-family: var(--vf-sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--vf-gold);
}
.feature-emoji { font-size: 2.6rem; line-height: 1; }

.vf-section-title {
  font-family: var(--vf-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--vf-heading);
  font-weight: 400;
}

.vf-rule {
  width: 60px;
  height: 2px;
  background: var(--vf-gold);
  margin: 1.2rem auto;
  border: none;
}

/* ---- Privacy page ---- */
.vf-prose,
.vf-prose p,
.vf-prose li { color: var(--vf-body); }
.vf-prose h2 { color: var(--vf-heading); margin-top: 2rem; }
.vf-prose h3 { color: var(--vf-gold-link); }
.vf-prose a { color: var(--vf-gold-link); }
.vf-prose strong { color: var(--vf-heading); }

/* ---- Footer (always dark, in both themes) ---- */
.vf-footer {
  background: #181818;
  color: #cfcfcf;
}
.vf-footer a { color: var(--vf-gold); }
.vf-footer a:hover { color: #fff; }
.brand-text-footer {
  font-family: var(--vf-serif);
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.vf-dot { color: var(--vf-gold); margin: 0 0.5rem; }
.vf-muted { color: var(--vf-muted) !important; }
.vf-footer .vf-muted { color: #8a8a8a !important; }