@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --accent:       #bd6418;
  --accent-light: #d4751e;
  --accent-dark:  #9e5214;
  --bg:           #ffffff;
  --bg2:          #faf9f7;
  --bg3:          #f3f0eb;
  --border:       #e8e2d9;
  --text:         #1a1a1a;
  --text-2:       #555550;
  --text-3:       #888880;
  --nav-bg:       rgba(255,255,255,0.92);
  --card-bg:      #ffffff;
  --shadow:       0 2px 12px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.14);
}

[data-theme="dark"] {
  --bg:           #141414;
  --bg2:          #1c1c1c;
  --bg3:          #242424;
  --border:       #2e2e2e;
  --text:         #f0ede8;
  --text-2:       #a8a49e;
  --text-3:       #6e6a64;
  --nav-bg:       rgba(20,20,20,0.92);
  --card-bg:      #1c1c1c;
  --shadow:       0 2px 12px rgba(0,0,0,0.3);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.45);
}

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

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
  line-height: 1.6;
}

/* Layout */
.max-width-1 { max-width: 1100px; }
.max-width-2 { max-width: 720px; }
.m-auto      { margin-left: auto; margin-right: auto; }
.my-2        { margin-top: 2rem; margin-bottom: 2rem; }
.mx-1        { margin-left: 1.5rem; margin-right: 1.5rem; }
.center      { text-align: center; }
.font1       { font-family: 'Inter', sans-serif; }
.font2       { font-family: 'Inter', sans-serif; }

/* Button */
.btn {
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-light); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-outline {
  padding: 0.5rem 1.25rem;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-outline:hover { background: var(--accent); color: white; }

/* Form inputs */
.form-input {
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  transition: border-color 0.2s;
  outline: none;
}
.form-input:focus { border-color: var(--accent); }

.form-box input,
.form-box textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  margin: 0.4rem 0;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  transition: border-color 0.2s;
  outline: none;
  resize: vertical;
}
.form-box input:focus,
.form-box textarea:focus { border-color: var(--accent); }