/* ================================================================
   UNIBRUZ — Base Styles (shared across all pages)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ----------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   ---------------------------------------------------------------- */
:root {
  --bg:            hsl(0 0% 4%);
  --card:          hsl(0 0% 8%);
  --text:          hsl(0 0% 95%);
  --muted:         hsl(0 0% 62%);
  --border:        hsl(0 0% 18%);
  --primary:       hsl(48 100% 50%);
  --primary-bright: hsl(48 100% 50%);
  --primary-fg:    hsl(0 0% 5%);
  --primary-hover: hsl(48 100% 44%);
  --success:       hsl(146 63% 42%);
  --danger:        hsl(0 75% 58%);
  --font-display:  'Syne', sans-serif;
  --font-body:     'Space Grotesk', sans-serif;
  --radius:        .65rem;
  --input-bg:      hsl(0 0% 5%);
  /* Legacy tokens (used in index.html via unibruz.css) */
  --yellow:        #FFCC00;
  --yellow-soft:   #FFE27A;
  --surface:       #141414;
  --surface-2:     rgba(255,255,255,.025);
  --text-muted:    rgba(255,255,255,.65);
  --text-dim:      rgba(255,255,255,.55);
  --pad:           80px;
  --gap:           100px;
  --ease:          200ms ease;
}

/* ----------------------------------------------------------------
   Light Theme Overrides
   ---------------------------------------------------------------- */
body.light-theme {
  --bg:            hsl(0 0% 100%);
  --card:          hsl(220 14% 97%);
  --text:          hsl(222 20% 10%);
  --muted:         hsl(220 10% 44%);
  --border:        hsl(220 14% 90%);
  --primary:       hsl(38 92% 32%);
  --primary-bright: hsl(45 100% 50%);
  --primary-fg:    hsl(0 0% 8%);
  --success:       hsl(146 60% 28%);
  --danger:        hsl(0 72% 42%);
  --input-bg:      hsl(0 0% 100%);
  background:      var(--bg);
}

/* ----------------------------------------------------------------
   Reduced Motion
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------
   Reset & Base
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color .25s ease, color .2s ease;
}
img   { display: block; max-width: 100%; }
a     { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ----------------------------------------------------------------
   Typography
   ---------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); }

.label {
  font-size: 12px; letter-spacing: 3px; font-weight: 700;
  color: var(--yellow); text-transform: uppercase;
}
.section-title { font-size: clamp(28px, 4vw, 48px); font-weight: 900; margin-top: 12px; }
.divider { width: 60px; height: 4px; background: var(--yellow); margin-top: 20px; }
.text-yellow { color: var(--yellow); }

/* ----------------------------------------------------------------
   Utility
   ---------------------------------------------------------------- */
.hidden { display: none !important; }

.container {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem;
}

/* ----------------------------------------------------------------
   Focus Styles
   ---------------------------------------------------------------- */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: hsl(0 0% 6%);
  color: var(--text);
  border-radius: .55rem;
  padding: .55rem .85rem;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  font-size: .85rem;
  transition: all .15s ease;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: var(--primary-fg);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 14px 32px;
  border-radius: 4px;
  border: none;
  transition: opacity var(--ease);
}
.btn-primary:hover { opacity: .88; }

body.light-theme .btn { background: var(--card); color: var(--text); border-color: var(--border); }
body.light-theme .btn-primary { background: var(--primary-bright); color: var(--primary-fg); border-color: transparent; }

/* Badge */
.badge {
  padding: .2rem .55rem;
  border-radius: 9999px;
  font-size: .74rem;
  font-weight: 700;
  border: 1px solid var(--border);
  color: var(--primary);
  background: hsl(48 100% 50% / .08);
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------- */
#site-nav,
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background-color: hsl(0 0% 4% / .9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid hsl(0 0% 18%);
  transition: background-color .25s ease, border-color .2s ease;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; height: 4rem;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo .wordmark { height: 1.75rem; width: auto; display: block; }
/* Logo dark/light variants */
.nav-logo .logo-light, .footer-wordmark.logo-light { display: none; }
.nav-logo .logo-dark,  .footer-wordmark.logo-dark  { display: block; }
body.light-theme .nav-logo .logo-light, body.light-theme .footer-wordmark.logo-light { display: block; }
body.light-theme .nav-logo .logo-dark,  body.light-theme .footer-wordmark.logo-dark  { display: none; }

.nav-links {
  display: flex; align-items: center; gap: 2rem; list-style: none;
}
.nav-links a {
  font-size: .875rem; font-weight: 500; color: hsl(0 0% 60%); transition: color .15s;
}
.nav-links a:hover, .nav-links a.active { color: hsl(48 100% 50%); }
.nav-links a.nav-signin,
.mobile-menu a.nav-signin {
  color: var(--primary) !important;
  font-weight: 700;
}
.nav-cta {
  padding: .5rem 1.25rem; border-radius: 4px;
  background-color: hsl(48 100% 50%); color: hsl(0 0% 4%) !important;
  font-weight: 700; transition: opacity .15s;
}
.nav-cta:hover { opacity: .9; }
.nav-actions {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end;
}
.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none; padding: .25rem;
}
.nav-burger span {
  display: block; width: 22px; height: 2px;
  background-color: hsl(48 100% 50%); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.mobile-menu {
  display: none; flex-direction: column; gap: 1rem;
  padding: 1.5rem 2rem; background: hsl(0 0% 4%);
  border-bottom: 1px solid hsl(0 0% 18%);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 1.125rem; font-weight: 500;
  color: hsl(0 0% 60%); transition: color .15s;
}
.mobile-menu a:hover, .mobile-menu a.active { color: hsl(48 100% 50%); }
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* Nav — Light Theme */
body.light-theme nav,
body.light-theme #site-nav {
  background-color: rgba(255, 255, 255, .96);
  border-bottom-color: var(--border);
}
body.light-theme .nav-links a { color: hsl(222 14% 42%); }
body.light-theme .nav-links a:hover,
body.light-theme .nav-links a.active { color: var(--text); }
body.light-theme .nav-burger span { background-color: hsl(222 20% 20%); }
body.light-theme .mobile-menu { background: #fff; border-bottom-color: var(--border); }
body.light-theme .mobile-menu a { color: hsl(222 14% 40%); }
body.light-theme .mobile-menu a:hover,
body.light-theme .mobile-menu a.active { color: var(--text); }

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
footer {
  padding: 4rem 0;
  border-top: 1px solid hsl(0 0% 18%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-wordmark { height: 1.5rem; width: auto; display: block; margin-bottom: 1rem; }
.footer-tagline { color: hsl(0 0% 60%); font-size: .875rem; line-height: 1.625; }
.footer-col h4 {
  font-weight: 600; font-size: .9375rem;
  color: hsl(0 0% 95%); margin-bottom: 1rem;
}
.footer-links-col { display: flex; flex-direction: column; gap: .5rem; }
.footer-links-col a { font-size: .875rem; color: hsl(0 0% 60%); transition: color .15s; }
.footer-links-col a:hover { color: hsl(48 100% 50%); }
.footer-contact p { font-size: .875rem; color: hsl(0 0% 60%); margin-bottom: .5rem; }
.footer-contact a { color: hsl(48 100% 50%); font-size: .875rem; font-weight: 500; }
.footer-contact a:hover { text-decoration: underline; }
.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid hsl(0 0% 18%);
  text-align: center; color: hsl(0 0% 60%); font-size: .75rem;
}

/* Footer — Light Theme */
body.light-theme footer {
  background-color: hsl(220 14% 97%);
  border-top: 1px solid var(--border);
  color: var(--text);
}
body.light-theme footer h4, body.light-theme footer a { color: var(--text); }
body.light-theme footer a:hover { color: var(--primary); }
body.light-theme .footer-bottom { border-top-color: var(--border); }
body.light-theme footer p,
body.light-theme footer span,
body.light-theme footer .footer-tagline,
body.light-theme .footer-bottom,
body.light-theme .footer-bottom * { color: var(--muted) !important; }