:root {
  --color-bone: #f7f3eb;
  --color-forest: #5f725d;
  --color-forest-dark: #485b46;
  --color-ink: #111111;
  --color-ink-muted: rgba(17, 17, 17, 0.7);
  --color-border: rgba(95, 114, 93, 0.55);
  --color-surface: rgba(95, 114, 93, 0.12);
  --color-surface-strong: rgba(95, 114, 93, 0.18);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Global text + background */
body {
  background: var(--color-bone);
}

body,
input,
select,
textarea {
  color: var(--color-ink);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0.18rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  color: var(--color-ink);
}

a {
  border-bottom-color: rgba(95, 114, 93, 0.65);
}

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

/* Headings underline (major) */
h1.major,
h2.major,
h3.major,
h4.major,
h5.major,
h6.major {
  border-bottom-color: var(--color-border);
}

/* Header accents */
#header {
  background-image: radial-gradient(rgba(95, 114, 93, 0.20) 25%, rgba(95, 114, 93, 0) 55%);
}

#header > *:before {
  background: var(--color-forest);
}

#header .logo {
  border-color: var(--color-forest);
}

#header .logo .icon:before {
  color: var(--color-forest);
}

#header .content {
  border-color: var(--color-forest);
}

#header .content .inner {
  background: rgba(247, 243, 235, 0.20);
  border-radius: 4px;
}

#header nav ul {
  border-color: var(--color-forest);
  background: transparent;
  backdrop-filter: none;
}

#header nav ul li {
  border-color: var(--color-forest);
  border-left-color: var(--color-forest);
}

#header nav.use-middle:after {
  background: var(--color-forest);
}

#header nav ul li a:hover {
  background-color: var(--color-surface);
}

#header nav ul li a:active {
  background-color: var(--color-surface-strong);
}

/* Articles become the "boxes" */
#main article {
  background-color: rgba(247, 243, 235, 0.92);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.relative-wrapper .major {
  background: rgba(247, 243, 235, 0.88);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
}

/* Close button icon + hover states */
#main article .close:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23111111%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
}

#main article .close:hover:before {
  background-color: var(--color-surface);
}

#main article .close:active:before {
  background-color: var(--color-surface-strong);
}

/* Forms */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
  background-color: rgba(247, 243, 235, 0.75);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  background: var(--color-surface);
  border-color: var(--color-forest);
  box-shadow: 0 0 0 1px var(--color-forest);
}

select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5, 0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23111111' /%3E%3C/svg%3E");
}

select option {
  color: var(--color-ink);
  background: var(--color-bone);
}

/* Buttons */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  box-shadow: inset 0 0 0 1px var(--color-forest);
  color: var(--color-ink) !important;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
  background-color: var(--color-surface);
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
  background-color: var(--color-surface-strong);
}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
  background-color: var(--color-forest);
  color: var(--color-bone) !important;
}

/* Background overlay: lighten + slight forest tint for readability with dark text */
#bg:before {
  background-image:
    linear-gradient(
      to top,
      rgba(247, 243, 235, 0.84),
      rgba(225, 235, 225, 0.72)
    ),
    url("../../images/overlay.png");
}

body.is-preload #bg:before {
  background-color: var(--color-bone);
}