:root {
  /* Amber palette */
  --color-primary: #d97706;
  --color-primary-hover: #b45309;
  --color-primary-main: #b45309;
  --color-primary-dark: #78350f;
  --color-primary-light: #fef3c7;
  --color-primary-rgb: 217, 119, 6;
  --color-accent: #f59e0b;
  --color-accent-hover: #d97706;
  /* Warm surfaces */
  --color-surface-bg: #fef3c7;
  --color-page-bg: #fffbeb;
  --color-border: rgba(253, 230, 138, .9);
  --color-border-warm: #fbbf24;
  /* Text */
  --color-text: #1c1917;
  --color-text-secondary: #57534e;
  --color-text-muted: #78716c;
  /* Layout */
  --menu-width: 280px;
  --home-radius: 10px;
  --board-radius: 8px;
  --home-shadow: 0 2px 12px rgba(217, 119, 6, 0.12);
  --card-shadow: 0 1px 6px rgba(120, 53, 15, 0.1);
  /* Footer */
  --footer-bg: #78350f;
  --footer-text: #fef3c7;
  --footer-heading: #fcd34d;
  --footer-border: 1px solid rgba(253, 211, 77, 0.2);
  /* Header */
  --header-bg: #ffffff;
  --header-border: 2px solid var(--color-primary);
  /* Sidebar Width */
  --menu-width: 330px;
}
body {
  background-color: var(--color-page-bg);
  color: var(--color-text);
  /* Paper texture feel */
  background-image:
    linear-gradient(rgba(217, 119, 6, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 119, 6, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  background-attachment: fixed;
}
.header {
  background: var(--header-bg);
  border-bottom: var(--header-border);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.1);
  position: sticky;
  top: 0;
  z-index: 1001;
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
}
.header-content .logo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  line-height: 1.4;
}
.header-content .logo::before {
  content: '';
  background-image: var(--logo);
  height: 3.6rem;
  min-width: 3.6rem;
  background-position: center;
  background-size: cover;
  border-radius: var(--border-radius);
}
.logo-text {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.logo-subtitle {
  opacity: 0.8;
  margin: 0;
}
.topmenu > ul > li > a,
.topmenu > ul > li > button {
  border-radius: var(--border-radius);
  font-weight: 500;
}
.topmenu li:not(.menu-close):hover > button:not(.active),
.topmenu li:hover > a:not(.active),
.topmenu li.select > button,
.topmenu li.select > a {
  color: var(--color-primary-dark);
  background-color: var(--color-primary-light);
}
.topmenu .active {
  color: var(--color-primary-dark) !important;
  background: var(--color-primary-light) !important;
}
.sidemenu li:hover > a,
.sidemenu li.select > a {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.hero {
  background-image: linear-gradient(135deg,
      var(--color-primary-light) 0%,
      var(--color-primary-main) 55%,
      var(--color-primary-dark) 100%);
  color: #fff;
  padding: var(--space-16) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg,
      #fbbf24 0px, #fbbf24 20px,
      #d97706 20px, #d97706 40px);
}
.content .section-bg {
  box-shadow: var(--home-shadow);
  border-left: 4px solid var(--color-primary);
}
.sidebar .section__header {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: #fef3c7;
  border-bottom: 2px solid var(--color-accent);
}
.sidebar .section__header h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sidebar .section__header h2::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.view-header {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: #fef3c7;
  padding: var(--space-10) 0;
  border-bottom: 3px solid var(--color-accent);
}
.image-links {
  padding: var(--space-12) 0;
}
.page-header > .container {
  align-items: center;
  border-bottom: none;
}
.homepage {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.home-content .section__body {
  padding-top: 0;
}
.home .section__body,
.page-body {
  padding-top: var(--space-4);
}