/* ============================================================================
   HoneyStore — Design Tokens & Base
   Aesthetic: refined luxury-organic. Warm honey/amber on cream, optical serif
   display (Fraunces) + humanist sans body (Mulish), honeycomb texture.
   ========================================================================== */

:root {
  /* ── Honey / amber scale ── */
  --honey-50:  #FFFBF2;
  --honey-100: #FCEFD6;
  --honey-200: #F7DCA8;
  --honey-300: #EFC274;
  --honey-400: #E0A03C;
  --honey-500: #C8851A;
  --honey-600: #B8730E;   /* brand primary */
  --honey-700: #95590A;
  --honey-800: #774608;
  --amber:     #E8A317;

  /* ── Browns / ink ── */
  --brown-900: #2A1D10;
  --brown-800: #3A2A18;   /* brand secondary */
  --brown-700: #5A4327;
  --brown-600: #7A5C38;
  --brown-500: #9C7A4E;

  /* ── Surfaces ── */
  --cream:   #FBF3E4;
  --paper:   #FFFDF8;
  --paper-2: #FFF9EF;
  --line:    #EADBC2;
  --line-2:  #F0E4CF;

  /* ── Semantic ── */
  --primary: var(--honey-600);
  --primary-dark: var(--honey-700);
  --ink: var(--brown-900);
  --text: #3B2C1B;
  --muted: #8A7355;
  --muted-2: #A8916F;
  --success: #2E7D32;
  --success-bg: #E7F2E8;
  --danger: #B3261E;
  --danger-bg: #FBE9E8;
  --info-bg: #FCEFD6;
  --gold: #C8961E;
  --star: #E0A03C;

  /* ── Typography ── */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ── Spacing (4px base) ── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* ── Radii ── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* ── Shadows (amber-tinted, layered) ── */
  --shadow-xs: 0 1px 2px rgba(58, 42, 24, 0.06);
  --shadow-sm: 0 2px 8px rgba(120, 70, 8, 0.08);
  --shadow-md: 0 8px 24px rgba(120, 70, 8, 0.10), 0 2px 6px rgba(58,42,24,0.06);
  --shadow-lg: 0 18px 48px rgba(120, 70, 8, 0.16), 0 4px 12px rgba(58,42,24,0.08);
  --shadow-glow: 0 8px 28px rgba(224, 160, 60, 0.35);

  /* ── Layout ── */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h: 116px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 420ms;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--ink);
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0; }
a { color: var(--primary-dark); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--honey-800); }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2.5px solid var(--honey-500); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--honey-200); color: var(--brown-900); }

/* ── Utilities ── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container-narrow { max-width: var(--container-narrow); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.muted { color: var(--muted); }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700; font-size: var(--text-xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--honey-700);
}
.hidden { display: none !important; }

@media (min-width: 768px) {
  h1 { font-size: var(--text-5xl); }
  .container { padding-inline: var(--sp-8); }
}