/* =====================================================
   Wordsmithery Base Theme
   Purpose: Central rustic-modern palette, typography, 
   elevation tokens, shared utility classes.
   ===================================================== */
:root {
  /* Core palette (light mode) */
  --bg: #f7f3e6;             /* parchment wash */
  --bg-alt: #efe6d2;          /* subtle panel backdrop */
  --surface: #ffffff;         /* card surface (crisp) */
  --surface-soft: #fbf7ef;    /* softer variant for nested blocks */
  --surface-2: #e9dcc7;       /* elevated surface tint */
  --ink: #2c261d;             /* primary text (warm charcoal) */
  --ink-muted: #6e5f4f;       /* secondary text */
  --ink-faint: #9b8b78;       /* tertiary hint */
  --border: #c8b291;          /* parchment edge line */
  --border-strong: #b39568;   /* stronger interactive border */
  --accent: #9c623b;          /* main accent (burnt sienna) */
  --accent-hover: #b56d40;    /* hover accent */
  --accent-active: #7f4e2d;   /* pressed accent */
  --accent-contrast: #fff9f1; /* readable text on accent */
  /* Submit CTA tokens */
  --submit-btn-bg: #ede2c7;
  --submit-btn-border: #bfa97c;
  --submit-btn-shadow: rgba(191, 169, 124, 0.6);
  --submit-btn-color: #3e2f20;
  --submit-btn-hover-bg: #a0522d;
  --submit-btn-hover-color: #fdf8ef;
  --highlight: #f2e6c7;       /* inline highlight background */
  --focus-ring: #d79c56;      /* accessible focus outline */
  --danger: #b3432f;          /* warnings/errors */
  --success: #4b7c4f;         /* confirmations */
  --info: #3f6e87;            /* informational */

  /* Shadows (layered parchment depth) */
  --shadow-color: 33 25 18;
  --shadow-soft: 0 2px 4px rgba(var(--shadow-color) / 0.12);
  --shadow-mid: 0 4px 12px rgba(var(--shadow-color) / 0.18);
  --shadow-deep: 0 8px 26px rgba(var(--shadow-color) / 0.28);
  --shadow-inset: inset 0 0 6px rgba(var(--shadow-color) / 0.15);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast: 120ms cubic-bezier(.4,.0,.2,1);
  --transition-med: 240ms cubic-bezier(.4,.0,.2,1);

  /* Typography scale */
  --font-serif: 'Merriweather', serif;
  --font-script: 'Great Vibes', cursive;
  --fs-xs: clamp(.72rem,.66rem + .25vw,.78rem);
  --fs-sm: clamp(.82rem,.74rem + .3vw,.9rem);
  --fs-base: clamp(.95rem,.88rem + .35vw,1.05rem);
  --fs-md: clamp(1.05rem,.95rem + .45vw,1.25rem);
  --fs-lg: clamp(1.3rem,1.15rem + .6vw,1.6rem);
  --fs-xl: clamp(1.9rem,1.6rem + 1vw,2.6rem);
}

/* Dark mode: richer contrasts while retaining warmth */
body.dark-mode {
  --bg: #16130f;             /* deep background */
  --bg-alt: #1d1813;          /* subtle layered depth */
  --surface: #222018;         /* primary card surface */
  --surface-soft: #271f17;    /* nested panels */
  --surface-2: #2e261d;       /* elevated surface */
  --ink: #d5c2aa;             /* readable warm text */
  --ink-muted: #af9b85;       /* secondary text */
  --ink-faint: #8a7763;       /* tertiary */
  --border: #574533;          /* standard border */
  --border-strong: #6d543d;   /* interactive border */
  --accent: #d38b55;          /* warm illuminated accent */
  --accent-hover: #e29b65;    /* hover accent */
  --accent-active: #b06e3c;   /* pressed accent */
  --accent-contrast: #1a1611; /* text on accent */
  --submit-btn-bg: #2e251d;
  --submit-btn-border: #6f5a47;
  --submit-btn-shadow: rgba(0, 0, 0, 0.55);
  --submit-btn-color: #fefbec;
  --submit-btn-hover-bg: #e29b65;
  --submit-btn-hover-color: #1a1611;
  --highlight: #3a2d22;       /* subtle highlight */
  --focus-ring: #e5a869;      /* accessible focus */
  --danger: #cf674f;
  --success: #5f9c64;
  --info: #4d89a3;

  --shadow-soft: 0 2px 4px rgba(0,0,0,.45);
  --shadow-mid: 0 4px 14px rgba(0,0,0,.55);
  --shadow-deep: 0 8px 30px rgba(0,0,0,.68);
  --shadow-inset: inset 0 0 6px rgba(0,0,0,.55);
}

/* Shared tab container background so both light and dark have a clear panel */
.tab-container-bg {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

/* Base element resets & typography */
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: 1.5;
  background: url('../../dark paper.jpg') center/cover no-repeat fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Custom select enhancer (fallback friendly) */
select.ui-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  padding: 8px 34px 8px 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  transition: var(--transition-fast);
}
select.ui-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(160,82,45,0.12); border-color: var(--accent); }
select.ui-select[data-ui-enhanced="true"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ui-select-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 180px;
  font-family: var(--font-serif);
}
.ui-select-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  transition: var(--transition-fast);
}
.ui-select-button::after {
  content: '\25BC';
  font-size: 0.7rem;
  color: var(--accent);
}
.ui-select-wrapper.open .ui-select-button {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(160,82,45,0.12);
}
.ui-select-dropdown {
  list-style: none;
  margin: 6px 0 0;
  padding: 4px 0;
  position: absolute;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-mid);
  max-height: 240px;
  overflow-y: auto;
  display: none;
  z-index: 40;
}
.ui-select-wrapper.open .ui-select-dropdown { display: block; }
.ui-select-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink);
  transition: var(--transition-fast);
}
.ui-select-option:hover,
.ui-select-option.selected { background: var(--highlight); }
.ui-select-option.disabled {
  color: var(--ink-muted);
  cursor: not-allowed;
}
body.dark-mode .ui-select-button {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink);
}
body.dark-mode .ui-select-button::after { color: var(--accent); }
body.dark-mode .ui-select-wrapper.open .ui-select-button {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(211,139,85,0.22);
}
body.dark-mode .ui-select-dropdown {
  background: var(--surface-2);
  border-color: var(--border);
}
body.dark-mode .ui-select-option { color: var(--ink); }
body.dark-mode .ui-select-option:hover,
body.dark-mode .ui-select-option.selected { background: var(--highlight); }
*,*::before,*::after { box-sizing: border-box; }
img,video { max-width:100%; height:auto; display:block; }

/* Scrollbar styling (WebKit) */
body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: var(--surface-soft); }
body::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); border: 3px solid var(--surface-soft); }
body::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.mobile-comment-cta {
  position: fixed;
  right: 18px;
  bottom: 18px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  font-weight: 700;
  font-family: var(--font-serif, 'Merriweather', serif);
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 50;
}
.mobile-comment-cta:focus-visible {
  outline: 3px solid rgba(255,255,255,0.6);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .mobile-comment-cta { display: inline-flex; }
}

/* Utility classes */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-mid { box-shadow: var(--shadow-mid); }
.shadow-deep { box-shadow: var(--shadow-deep); }
.inset-soft { box-shadow: var(--shadow-inset); }
.flex { display:flex; }
.grid { display:grid; }
.center { display:flex; align-items:center; justify-content:center; }
.hide { display:none !important; }
.text-script { font-family: var(--font-script); }

/* Focus outline helper */
.focus-ring:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Button base (extend in page css) */
.btn-base {
  font-family: var(--font-serif);
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--surface-soft);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-med);
  box-shadow: var(--shadow-soft);
}
.btn-base:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--border-strong); }
.btn-base:active { background: var(--accent-active); transform: translateY(1px); }
.btn-base:focus { outline: 3px solid var(--focus-ring); }
body.dark-mode .btn-base { background: var(--surface-2); }

/* Card base */
.card-base {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition-fast);
}
.card-base:hover { box-shadow: var(--shadow-mid); }
body.dark-mode .card-base { background: var(--surface); }

/* Heading refinements */
.h-title {
  font-family: var(--font-script);
  font-size: var(--fs-xl);
  margin: 0;
  text-shadow: 2px 2px 8px var(--surface-soft), 0 2px 12px var(--border);
  color: #000; /* keep deep contrast like parchment ink */
  border-bottom: 3px solid var(--border);
  padding-bottom: 6px;
}
body.dark-mode .h-title { color: var(--accent-contrast); text-shadow: 2px 2px 10px rgba(0,0,0,.6); border-bottom-color: var(--border); }

/* Interactive field base */
.field-base {
  background: var(--surface-soft);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 14px;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: var(--transition-fast);
}
.field-base:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); background: var(--surface); }
body.dark-mode .field-base { background: var(--surface-2); }

/* Elevated accent block */
.accent-panel {
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-mid);
  position: relative;
}
.accent-panel:hover { box-shadow: var(--shadow-deep); }
body.dark-mode .accent-panel { box-shadow: var(--shadow-mid); }

/* Link style */
.link-inline { color: var(--accent); text-decoration: none; font-weight: 600; }
.link-inline:hover { text-decoration: underline; color: var(--accent-hover); }
.link-inline:active { color: var(--accent-active); }
body.dark-mode .link-inline { color: var(--accent-hover); }

/* Tag/chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--highlight);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-muted);
}
body.dark-mode .chip { background: var(--surface-2); color: var(--ink-faint); }

/* Motion helpers */
.fade-in { animation: fadeIn .4s ease forwards; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }

/* Responsive helpers */
@media (max-width: 600px) {
  .hide-mobile { display:none !important; }
}
@media (min-width: 1025px) {
  .only-desktop { display:initial !important; }
}