/* ============================================================
   Slowley Farm — Colors & Type
   A palette pulled directly from the cottages: cream walls,
   sage cabinets, terracotta plaster, exmoor greens, slate floors.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Nunito+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* -- Brand Palette ----------------------------------------
     Named for what they ARE in the cottages, not abstract roles. */

  --cream:          #F5EFE2;  /* logo background, walls, parchment */
  --cream-soft:     #ECE4D2;  /* soft, slightly deeper cream for surfaces */
  --parchment:      #E8DFC8;  /* aged paper, chalkboard backing */

  --sage:           #6B7F5C;  /* logo leaf, English country green */
  --sage-deep:      #4F6244;  /* deep moss, hover states */
  --sage-pale:      #A6B095;  /* faded sage, dividers */

  --terracotta:     #B5664A;  /* bedroom walls, clay tiles */
  --terracotta-deep:#8C4A33;  /* roof bricks, darker accents */
  --rust:           #C9663A;  /* throw blanket, accent warmth */
  --clay:           #D9A574;  /* wood, honey tones */

  --slate:          #2E2A26;  /* slate floors, primary text */
  --slate-2:        #4A4540;  /* secondary text */
  --slate-3:        #6F6862;  /* muted text, captions */
  --stone:          #B5A99A;  /* stonework, borders */
  --stone-pale:     #D6CCBC;  /* very faint borders, surfaces */

  --moss:           #3F5240;  /* deep forest, foliage */
  --bluebell:       #8893BB;  /* bluebell wood, soft cool */
  --sky:            #B8C9D9;  /* exmoor sky */
  --sunlight:       #E8C77A;  /* daffodils, late sun */

  /* -- Semantic Color Tokens ------------------------------- */
  --bg:             var(--cream);        /* page background */
  --bg-2:           var(--cream-soft);   /* card / inset surfaces */
  --bg-3:           var(--parchment);    /* deeper inset, footer */
  --bg-inverse:     var(--slate);        /* dark sections */

  --fg:             var(--slate);        /* primary text */
  --fg-2:           var(--slate-2);      /* secondary text */
  --fg-3:           var(--slate-3);      /* muted, captions, meta */
  --fg-inverse:     var(--cream);        /* text on dark */

  --accent:         var(--sage);         /* primary brand action */
  --accent-deep:    var(--sage-deep);    /* hovered/pressed action */
  --accent-warm:    var(--terracotta);   /* secondary warm accent */

  --border:         var(--stone-pale);   /* hairline */
  --border-strong:  var(--stone);        /* card / divider */
  --rule:           var(--sage-pale);    /* decorative rule */

  /* -- Typography ----------------------------------------- */
  --font-serif:     "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-sans:      "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:      ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* Display sizing scale (fluid-ish) */
  --fs-hero:        clamp(48px, 7vw, 96px);
  --fs-h1:          clamp(36px, 4.5vw, 64px);
  --fs-h2:          clamp(28px, 3vw, 44px);
  --fs-h3:          22px;
  --fs-h4:          18px;
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-tiny:        12px;
  --fs-eyebrow:     12px;

  /* Line heights & spacing */
  --lh-display:     1.05;
  --lh-tight:       1.2;
  --lh-body:        1.6;
  --lh-loose:       1.8;

  --tracking-wide:  0.18em;   /* eyebrows, all-caps labels */
  --tracking-mid:   0.06em;
  --tracking-tight: -0.01em;

  /* -- Spacing (8pt-ish, gentle) -------------------------- */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           24px;
  --sp-6:           32px;
  --sp-7:           48px;
  --sp-8:           64px;
  --sp-9:           96px;
  --sp-10:          128px;

  /* -- Radii ---------------------------------------------- */
  --radius-xs:      2px;
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      14px;
  --radius-pill:    999px;

  /* -- Shadows -- soft, like daylight on stone ------------- */
  --shadow-1:       0 1px 2px rgba(46, 42, 38, 0.06);
  --shadow-2:       0 2px 6px rgba(46, 42, 38, 0.08), 0 1px 2px rgba(46,42,38,0.05);
  --shadow-3:       0 8px 22px rgba(46, 42, 38, 0.10), 0 2px 6px rgba(46,42,38,0.06);
  --shadow-frame:   0 18px 40px rgba(46, 42, 38, 0.18);  /* picture-frame lift */
  --shadow-inset:   inset 0 1px 2px rgba(46, 42, 38, 0.08);

  /* -- Motion --------------------------------------------- */
  --ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:       160ms;
  --dur-mid:        260ms;
  --dur-slow:       420ms;
}

/* ============================================================
   Base / Semantic Element Styles
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--fg);
  font-weight: 500;
  margin: 0;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.hero {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 600;
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

.lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sage-deep);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--fg-3);
  font-style: italic;
}

small, .small {
  font-size: var(--fs-small);
  color: var(--fg-3);
}

a {
  color: var(--sage-deep);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--terracotta-deep);
  text-decoration: underline;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}

hr, .rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  opacity: 0.6;
}

/* "Hand" decorative — for chalkboard / handwritten welcome notes */
.hand {
  font-family: "Caveat", "Bradley Hand", cursive;
  font-weight: 500;
}