/* ============================================
   MAIN STYLES
   ============================================ */

@import 'variables.css';

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Base --- */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family:      var(--font-body);
  background-color: var(--color-bg);
  color:            var(--color-text);
  line-height:      1.7;
  padding:          0 var(--space-md);
}

/* --- Layout wrapper --- */
.container {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   var(--space-xl) 0;
}

/* --- Navigation --- */
nav {
  border-bottom: 1px solid var(--color-border);
  padding:       var(--space-md) 0;
}

nav .nav-inner {
  max-width:      var(--max-width);
  margin:         0 auto;
  display:        flex;
  justify-content:space-between;
  align-items:    center;
  padding:        0 var(--space-md);
}

nav .logo {
  font-family:  var(--font-heading);
  font-size:    1.2rem;
  font-weight:  normal;
  color:        var(--color-text);
  text-decoration: none;
}

nav ul {
  list-style: none;
  display:    flex;
  gap:        var(--space-lg);
}

nav a {
  color:           var(--color-text-muted);
  text-decoration: none;
  font-size:       0.9rem;
  transition:      color 0.2s;
}

nav a:hover { color: var(--color-accent); }

/* --- Typography --- */
h1, h2, h3 {
  font-family:  var(--font-heading);
  font-weight:  normal;
  line-height:  1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--space-md); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem);  margin-bottom: var(--space-sm); }
h3 { font-size: 1.2rem;                    margin-bottom: var(--space-sm); }

p  { margin-bottom: var(--space-md); color: var(--color-text-muted); }

a  { color: var(--color-accent); }
a:hover { color: var(--color-accent-dark); }

/* --- Hero section --- */
.hero {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-border);
}

.hero .eyebrow {
  font-size:     0.85rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:         var(--color-accent);
  margin-bottom: var(--space-sm);
}

/* --- Footer --- */
footer {
  border-top:  1px solid var(--color-border);
  padding:     var(--space-lg) var(--space-md);
  text-align:  center;
  color:       var(--color-text-muted);
  font-size:   0.85rem;
  margin-top:  var(--space-xl);
}