@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Lora:wght@400;700&family=Playfair+Display:wght@400;700&family=Merriweather:wght@400;700&family=Amatic+SC:wght@400;700&family=Rokkitt:wght@400;700&display=swap');

/* ==============================
   BASE STYLES - Grundläggande stilar & Variabler
================================ */

:root {
  --primary-color: #8a7a66; /* Jordnära metallfärg */
  --secondary-color: #d3c6b1; /* Ljusare bakgrundsfärg */
  --accent-color: #e0a96d; /* Accentfärg för knappar */
  --text-color: #3a3a3a; /* Textfärg */
  --background-color: #f7f3ef; /* Bakgrundsfärg */
  --hover-color: #9e876b; /* Hover-effekt */
  
  /* Fonter */
  --font-heading: 'Cormorant Garamond', serif;  /* Huvudrubriker */
  --font-subheading: 'Playfair Display', serif; /* Sekundära rubriker */
  --font-body: 'Lora', serif; /* Brödtext */
  --font-alt-body: 'Merriweather', serif; /* Alternativ brödtext */
  --font-decorative: 'Amatic SC', cursive; /* Dekorativa element */
  --font-button: 'Rokkitt', serif; /* Knappar och CTA */
  
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: 1.6;
}

h1, h2 {
  font-family: var(--font-heading);
}

h3, h4 {
  font-family: var(--font-subheading);
  font-weight: 400;
}

p {
  font-family: var(--font-body);
}

blockquote {
  font-family: var(--font-alt-body);
  font-style: italic;
}

.decorative {
  font-family: var(--font-decorative);
  font-size: 1.4rem;
  text-transform: uppercase;
}

/* Knappar och CTA */
button, .form__button {
  font-family: var(--font-button);
  text-transform: uppercase;
  font-weight: bold;
}

/* Generella knappar */
.button {
  background-color: var(--accent-color);
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: var(--hover-color);
}

/* Formulär */
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form__label {
  font-weight: bold;
}

.form__input, .form__textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--secondary-color);
  border-radius: 4px;
}


/* ==============================
   Scroll-Bar stil - Stöd i chrome, Edge och Safari
================================ */

/* Scrollbarens hela area */
::-webkit-scrollbar {
  width: 10px; /* Bredden på scrollfältet */
}

/* Scrollspåret (bakgrunden) */
::-webkit-scrollbar-track {
  background: var(--secondary-color); /* Bakgrundsfärg */
  /* border-radius: 10px; */
}

/* Själva "handtaget" på scrollbaren */
::-webkit-scrollbar-thumb {
  background: var(--primary-color); /* Färg på scroll-handtaget */
  /* border-radius: 10px; */
}

/* Hover-effekt på scroll-handtaget */
::-webkit-scrollbar-thumb:hover {
  background: var(--hover-color);
}