/*----- GLOBALA STILAR -----*/
:root{
  /*----- FÄRGER -----*/
  --page-bg: #ebe8e1;
  --card-bg: #f9f7f4;
  --text: #2a2d2e;

   --accent-1: #4a7c7e;
  --accent-1-hover: #3b6365;
  --accent-1-deep: #2c4a4c;
  --accent-1-soft: #b7cbcb;

  --accent-2: #c9b896;
  --accent-2-hover: #a19378;
  --accent-2-deep: #796e5a;
  --accent-2-soft: #e9e3d5;

  /*----- TYPSNITT -----*/
  --font-heading: "Limelight", serif;
  --font-body: "Public Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /*----- AVSTÅND -----*/
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /*----- FORM + DJUP -----*/
  --radius-card: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 25px rgba(17, 24, 39, 0.10);

  /*----- LAYOUT -----*/
  --container-max: 720px;

  /*----- FOKUS -----*/
  --focus-ring: 0 0 0 3px var(--accent-1-soft);

  /* ----- NYA TOKENS ----- */
  --space-5: 20px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 14px;

  --brand-logo-height: 60px;
  --header-toggle-size: 60px;
  --icon-sm: 30px;
  --social-icon-size: 50px;

  --bp-mobile: 520px; /* note: custom props can't be used in @media queries broadly */

  --surface: #ffffff;
  --border-muted: #dddddd;

  --shadow-modal: 0 8px 30px rgba(0,0,0,0.18);
  --shadow-popover: 0 20px 40px rgba(42,45,46,0.14);
  --shadow-image: 0 8px 20px rgba(0,0,0,0.12);

  --textarea-min-height: 120px;
}

*,
*::before,
*::after{ box-sizing: border-box; }

body{
  font-family: var(--font-body), var(--font-heading);
  background: var(--page-bg);
  color: var(--text);
}

:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}

/*----- RUBRIKER -----*/
h1 {
  font-family: var(--font-heading);
  font-size: 3rem;
  margin: 0 0 var(--space-4) 0;
}

h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin: 0 0 var(--space-3) 0;
}

h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin: 0 0 var(--space-2) 0;
}

/*----- KNAPPAR -----*/
.button-primary {
	display: inline-block;
	background: var(--accent-1);
	color: var(--accent-2);
	padding: var(--space-4);
	border: 2px solid var(--accent-2);
	border-radius: var(--radius-pill);
	font-weight: 600;
  text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, transform .06s ease;
}

.button-primary:hover { 
  background: var(--accent-1-hover); 
  transform: translateY(2px); 
}

.button-primary:active {
  transform: translateY(0); 
}

.button-secondary {
  display: inline-block;
  background: var(--accent-2);
  color: var(--text);
  padding: var(--space-4);
  border: 2px solid var(--accent-1);
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, transform .06s ease;
}

.button-secondary:hover { 
  background: var(--accent-1-hover); 
  transform: translateY(2px); 
}

.button-secondary:active {
  transform: translateY(0); 
}

/* Form header with close button aligned to the heading */
#contact-form .form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#contact-form .form-header h2 {
  margin: 0;
}

#contact-form .form-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#contact-form .form-close img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

#contact-form .form-close:hover {
  background: rgba(0,0,0,0.04);
}

#contact-form .form-close:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}