/* =========================================
   1) Modern CSS Reset
========================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

p {
  margin: 0;
}

ul,
ol {
  list-style: none;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: 1px solid transparent;
}

textarea {
  resize: vertical;
}

/* =========================================
   2) Root Variables
========================================= */
:root {
  /* Colors */
  --color-text-muted: #6f7469;
  --color-link: #7a5c36;
  --color-link-hover: #584022;
  --color-border: #dacdb9;
  --color-focus: #9b7d51;
  --color-selection-text: #fffdf8;
  --color-selection-bg: #405248;

  /* Mobile-safe spacing */
  --container-padding-x-mobile: 0.75rem;
  --section-space-y-mobile: 2.625rem;

  /* Backgrounds */
  --bg-page: #f6f1e8;
  --bg-surface: #fffdf8;
  --bg-muted: #ece3d5;
  --bg-scrollbar-track: #eee6da;
  --bg-scrollbar-thumb: #aa9475;
  --bg-scrollbar-thumb-hover: #79654a;
  --bg-deep: #20372d;
  --bg-deep-soft: #2c463a;

  /* Typography */
  --font-family-base: "Poppins", sans-serif;
  --font-family-heading: "Playfair Display", serif;
  --font-size-root: 100%;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-body: 1.6;
  --line-height-heading: 1.25;
  --color-heading: #957347;
  --color-text: #31392f;

  /* Borders */
  --border-width-thin: 0.0625rem;
  --border-style-default: solid;

  /* Shadows */
  --shadow-sm: 0 0.5rem 1.5rem rgba(48, 48, 34, 0.08);
  --shadow-md: 0 1rem 2.5rem rgba(48, 48, 34, 0.14);

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-round: 9999rem;

  /* Transition Duration */
  --duration-fast: 120ms;
  --duration-base: 220ms;

  /* Container Width */
  --container-max-width: 75rem;
  --container-padding-x: 1rem;
  --container-padding-x-lg: 1.5rem;

  /* Section Spacing */
  --section-space-y: clamp(2.625rem, 11vw, 6.125rem);

  
  /* Z-index Levels */
  --z-base: 1;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* =========================================
   3) Global Typography
========================================= */
html {
  font-size: var(--font-size-root);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--bg-page);
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

main {
  overflow: clip;
}

section {
  position: relative;
}

.section-kicker {
  margin-bottom: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
}

p {
  color: var(--color-text);
}

small {
  font-size: var(--font-size-small);
  line-height: 1.4;
  color: var(--color-text-muted);
}

strong {
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

a:hover {
  color: var(--color-link-hover);
}

button,
input,
textarea,
select {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

/* =========================================
   4) Global Image Rules
========================================= */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================================
   5) Accessibility Utility
========================================= */
.visually-hidden {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   7) Text Selection
========================================= */
::selection {
  color: var(--color-selection-text);
  background-color: var(--color-selection-bg);
}

@media (max-width: 30rem) {
  :root {
    --container-padding-x: var(--container-padding-x-mobile);
    --section-space-y: var(--section-space-y-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* =========================================
   8) Scrollbar
========================================= */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-scrollbar-thumb) var(--bg-scrollbar-track);
}

::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
}

::-webkit-scrollbar-track {
  background: var(--bg-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-scrollbar-thumb);
  border-radius: var(--radius-round);
  border: 0.125rem solid var(--bg-scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scrollbar-thumb-hover);
}

/* =========================================
   9) Focus State
========================================= */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}

:where([tabindex="-1"]):focus-visible {
  outline: none;
}

/* =========================================
   10) Smooth Scrolling
========================================= */
html:focus-within {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}

/* =========================================
   11) Accessibility
========================================= */
:where([hidden]) {
  display: none;
}

:where([aria-disabled="true"]) {
  cursor: not-allowed;
}

:where([role="button"], button, input, select, textarea, a) {
  -webkit-tap-highlight-color: transparent;
}

/* =========================================
   12) Performance
========================================= */
html {
  hanging-punctuation: first last;
}