/* ============================================================
   LUMFELL — handmade leather goods
   Design tokens + base styles  (role-based theming)
   ============================================================ */

:root {
  /* ---- Accents (theme-independent) ---- */
  --cognac:     #B26A38;
  --cognac-2:   #9A5A2E;
  --tan:        #C9AE8C;

  /* ---- LIGHT theme (default — matches reference) ---- */
  --page:        #FAF7F1;   /* dominant page surface */
  --panel:       #EFE8DC;   /* secondary surface (values, best-sellers) */
  --page-fg:     #211A13;   /* primary ink */
  --page-fg-soft:#6B5E4F;
  --page-fg-faint:#9B8E7C;
  --page-line:   rgba(33,26,19,0.13);

  /* relief / inverted sections (process, benefits, newsletter, footer) */
  --dark:        #1C1712;
  --dark-2:      #14100C;
  --dark-fg:     #ECE3D6;
  --dark-fg-soft:#A89A88;
  --dark-fg-faint:#6E6253;
  --dark-line:   rgba(201,174,140,0.16);

  /* leather tones for placeholder imagery (constant) */
  --ph-a: #33271c; --ph-b: #1a130d;

  /* Type */
  --serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --sans:  "Jost", system-ui, sans-serif;

  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- DARK theme (recoverable via Tweaks) ---- */
body[data-theme="dark"] {
  --page:        #15110D;
  --panel:       #1C1712;
  --page-fg:     #ECE3D6;
  --page-fg-soft:#A89A88;
  --page-fg-faint:#6E6253;
  --page-line:   rgba(201,174,140,0.16);
  --dark:        #1C1712;
  --dark-2:      #110D09;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--page-fg);
  font-family: var(--sans);
  font-weight: 350;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}

::selection { background: var(--cognac); color: #fff; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

/* ---- utility ---------------------------------------------- */
.u-wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.u-eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.u-serif { font-family: var(--serif); }
.u-italic { font-style: italic; }

/* buttons --------------------------------------------------- */
.btn {
  --bg: var(--cognac); --fg: #fff;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 500; padding: 16px 32px;
  border: none; background: var(--bg); color: var(--fg);
  display: inline-flex; align-items: center; gap: 12px;
  position: relative; overflow: hidden;
  transition: color .5s var(--ease), background .4s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform: translateY(101%); transition: transform .5s var(--ease); z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--cognac); }
.btn:hover::after { transform: translateY(0); }

/* ink button — for CTAs on light surfaces (reference hero) */
.btn--ink { --bg: var(--page-fg); --fg: var(--page); }
.btn--ink::after { background: var(--cognac); }
.btn--ink:hover { color: #fff; }

/* ghost — bordered, adapts to current text color (dark sections) */
.btn--ghost { background: transparent; border: 1px solid currentColor; color: inherit; }
.btn--ghost::after { background: currentColor; }
.btn--ghost:hover { color: var(--dark); }

.link-u {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 4px; position: relative; width: fit-content;
  background: none; border: none; color: inherit; cursor: pointer;
}
.link-u::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: left; opacity: .3; transition: opacity .4s var(--ease);
}
.link-u:hover::after { opacity: 1; }
.link-u svg { transition: transform .4s var(--ease); }
.link-u:hover svg { transform: translateX(5px); }

/* ---- placeholder imagery (leather-toned, constant) -------- */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, var(--ph-a) 0%, var(--ph-b) 100%);
  display: flex; align-items: center; justify-content: center;
}
.ph__tag {
  font-family: "Jost", monospace; font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(236,227,214,0.55);
  border: 1px solid rgba(236,227,214,0.22); padding: 7px 13px;
  background: rgba(0,0,0,0.16); backdrop-filter: blur(2px);
  text-align: center; line-height: 1.5; max-width: 80%;
}

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } }

.thin-scroll::-webkit-scrollbar { width: 7px; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--dark-fg-faint); border-radius: 4px; }