/* Paper Pivot - Base Styles & Color Palette */

/* Local Font Loading - Hepta Slab Variable Font */
@font-face {
  font-family: 'Hepta Slab';
  src: url('../assets/fonts/HeptaSlab-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}



/* Color Palette (derived from logo and parchment theme) */
:root {
  /* Primary Colors from Logo */
  --primary-gold: #c1933a;
  --accent-gold: #FFD700;
  --secondary-gold: #c4923d;
  --dark-brown: #3e2723;
  
  /* Light Background Colors */
  --bg-light: #f2f0ef; /* #F1E9D2 Parchment overall background */
  --bg-base: #ffffff;  /* #f2f0ef Off-white for panels/cards */
  --bg-warm: #F7E6CA; /* Warm highlight background (used for subtle callouts) */
  
  /* Neutral Colors */
  --text-dark: #3e2723;
  --text-medium: #5c4e2a;
  --text-light: #8b7355;
  
  /* Accent Colors */
  --border-light: #d4c4a0;
  --shadow-soft: rgba(106, 84, 47, 0.15);
}

/* Text selection highlight */
::selection {
  background-color: var(--accent-gold);
  color: var(--dark-brown);
}
::-moz-selection {
  background-color: var(--accent-gold);
  color: var(--dark-brown);
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Hepta Slab', 'monospace', serif;
  font-weight: 400; /* Regular weight for body text */
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--bg-light);
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(193, 147, 58, 0.008) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(252, 250, 247, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(193, 147, 58, 0.005) 0%, transparent 50%);
  min-height: 100vh;
}

/* Typography - only what's used */
h1, h2 {
  font-family: 'Hepta Slab', 'monospace', serif;
  color: var(--dark-brown);
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
  font-weight: 700; /* Bold weight for main titles */
}

h2 {
  font-size: 2rem;
  font-weight: 600; /* SemiBold weight for section titles */
}

p {
  margin-bottom: 1rem;
  color: var(--text-medium);
}

/* Layout Utilities - only what's used */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.text-center {
  text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .container {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.75rem;
  }
}