/* ==========================================================================
   BERNIE & CREAM — 01. BASE
   Design tokens, reset, typography, utilities.
   Load order: styles.css -> layout.css -> components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   Change a value here and it updates everywhere. This is the DRY core.
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours (from your approved mock) */
  --brand-cream:  #FDFBF7;
  --brand-mocha:  #4A3320;
  --brand-caramel:#D48C45;
  --brand-latte:  #E8D5C4;
  --brand-white:  #FFFFFF;

  /* Derived tints — avoids hard-coding rgba() all over the sheet */
  --mocha-90: rgba(74, 51, 32, 0.90);
  --mocha-70: rgba(74, 51, 32, 0.70);
  --mocha-55: rgba(74, 51, 32, 0.55);
  --mocha-15: rgba(74, 51, 32, 0.15);
  --mocha-08: rgba(74, 51, 32, 0.08);
  --caramel-15: rgba(212, 140, 69, 0.15);

  /* Feedback colours (forms, errors) */
  --ok-bg:     #ECF7ED;
  --ok-text:   #1F6F2C;
  --error-text:#9B2C2C;

  /* Typography */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Fluid type scale — shrinks on mobile, grows on desktop, no media queries */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem,  1.3rem + 1vw,   2rem);
  --fs-3xl:  clamp(1.9rem,  1.5rem + 1.8vw, 2.75rem);
  --fs-4xl:  clamp(2.4rem,  1.7rem + 3vw,   4rem);

  /* Spacing scale (8px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container-max: 1180px;
  --container-pad: 1.25rem;
  --prose-max: 68ch;          /* readable article line length */
  --header-h: 72px;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-soft:  0 10px 40px -10px rgba(74, 51, 32, 0.10);
  --shadow-card:  0 2px 12px -4px rgba(74, 51, 32, 0.14);
  --shadow-lift:  0 14px 32px -12px rgba(74, 51, 32, 0.28);

  /* Motion */
  --transition-standard: 0.25s ease;

  /* Stacking order — kept in one place so layers never fight.
     IMPORTANT: the mobile drawer lives INSIDE .site-header, so it can never
     paint above .site-header's own z-index no matter what value it is given.
     The backdrop therefore has to sit BELOW the header, not between the
     header and the drawer. It still covers page content, and leaving the
     header clickable is what you want anyway — that is where the close
     button is. */
  --z-dropdown: 100;
  --z-backdrop: 150;
  --z-header:   200;
  --z-consent:  400;
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Stops sticky-header anchor links from hiding the heading they jump to */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--brand-cream);
  color: var(--brand-mocha);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Pins the footer to the bottom on short pages */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

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

button, input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5, h6 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--brand-mocha);
  text-decoration-color: var(--brand-caramel);
  text-underline-offset: 3px;
  transition: color var(--transition-standard);
}
a:hover { color: var(--brand-caramel); }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li { margin-bottom: var(--space-2); }

blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-2) var(--space-5);
  border-left: 3px solid var(--brand-caramel);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--mocha-90);
}

hr {
  border: 0;
  border-top: 1px solid var(--brand-latte);
  margin: var(--space-6) 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--mocha-08);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

/* Readable article column. Wrap long-form page copy in <div class="prose"> */
.prose { max-width: var(--prose-max); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose img { border-radius: var(--radius-md); margin: var(--space-5) 0; }

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */

/* Visible keyboard focus everywhere. Do not remove. */
:focus-visible {
  outline: 3px solid var(--brand-caramel);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Screen-reader-only text that is still announced aloud */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" link — hidden until focused by keyboard */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 999;
  background: var(--brand-mocha);
  color: var(--brand-cream);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 0; color: var(--brand-cream); }

/* Respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */
.text-cream   { color: var(--brand-cream); }
.text-mocha   { color: var(--brand-mocha); }
.text-caramel { color: var(--brand-caramel); }
.text-muted   { color: var(--mocha-70); }

.bg-cream   { background-color: var(--brand-cream); }
.bg-mocha   { background-color: var(--brand-mocha); }
.bg-caramel { background-color: var(--brand-caramel); }
.bg-latte   { background-color: var(--brand-latte); }
.bg-white   { background-color: var(--brand-white); }

.text-center { text-align: center; }
.shadow-soft { box-shadow: var(--shadow-soft); }
.is-hidden   { display: none !important; }

.lead {
  font-size: var(--fs-lg);
  color: var(--mocha-70);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   ANIMATION
   One page-load reveal on the homepage hero. Used sparingly on purpose.
   -------------------------------------------------------------------------- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fade-in-up 0.7s ease-out forwards;
  opacity: 0;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }