@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&display=swap');

/* Brand input colors (user-chosen 5) */
:root {
  --brand-primary: #0a0a0a;
  --brand-secondary: #c9a96e;
  --brand-accent: #aaaaae;
  --brand-neutral: #6b7280;
  --brand-text: #1f2937;

  /* Semantic tokens — derived from brand + colorMode (active: light) */
  --surface: #ffffff;
  --surface-alt: #f8f8f9;
  --on-surface: #1f2937;
  --on-surface-muted: #848991;
  --cta: #0a0a0a;
  --cta-fg: #ffffff;
  --cta-hover: #000000;
  --accent-bg: #aaaaae;
  --accent-fg: #1f2937;
  --border: rgba(107, 114, 128, 0.2);
  --border-strong: #6b7280;
}

/* Default surface + body text — keeps the page in the right mode even before AI HTML renders */
html, body {
  background-color: var(--surface);
  color: var(--on-surface);
}

/* Brand utility classes */
.bg-primary { background-color: var(--brand-primary); }
.bg-secondary { background-color: var(--brand-secondary); }
.bg-accent { background-color: var(--brand-accent); }
.bg-neutral { background-color: var(--brand-neutral); }

.text-primary { color: var(--brand-primary); }
.text-secondary { color: var(--brand-secondary); }
.text-accent { color: var(--brand-accent); }
.text-neutral { color: var(--brand-neutral); }

.border-primary { border-color: var(--brand-primary); }
.border-secondary { border-color: var(--brand-secondary); }
.border-accent { border-color: var(--brand-accent); }
.border-neutral { border-color: var(--brand-neutral); }

/* Link styling */
a {
  color: var(--brand-primary);
  transition: opacity 0.2s ease;
}
a:hover { opacity: 0.8; }

/* Header nav visibility — pre-Tailwind-CDN flash protection */
@media (min-width: 768px) {
  header nav {
    display: flex !important;
  }
}

header nav a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: opacity 0.15s ease, border-bottom-color 0.15s ease;
}

header nav a:hover {
  opacity: 0.65;
  border-bottom-color: currentColor;
}