/* ============================================================
   Kelly Knows Homes — colors & type
   Single source of truth for tokens. Link this first.
   ============================================================ */

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

:root {
  /* ---------- Brand palette -----------------------------
     A curated neutral palette. Warm white surface, near-black
     type, mid grey for support, taupe & cream for warmth.
     Inspired by Ffern / Rothy's / Everlane.
     ------------------------------------------------------ */

  /* Core neutrals */
  --kkh-bone:        #FAF8F5;  /* page surface — warm white */
  --kkh-ivory:       #F4F1EC;  /* secondary surface */
  --kkh-cream:       #E8E4DD;  /* card / well */
  --kkh-stone:       #D8D2C6;  /* divider tone, soft */
  --kkh-taupe:       #B5B0A6;  /* muted tone, hairlines */
  --kkh-clay:        #8B7F6E;  /* warm mid, dressier dividers */
  --kkh-graphite:    #5A5A5A;  /* muted body */
  --kkh-ink:         #1A1814;  /* near-black, faintly warm */
  --kkh-onyx:        #101010;  /* true near-black for buttons */

  /* Single accent — warm clay. Used sparingly: links on hover,
     active states, "new" badges. Never as a flat surface fill. */
  --kkh-terracotta:  #B65A3C;
  --kkh-terracotta-deep: #8E4327;

  /* Hairlines and washes (use rgba for layering) */
  --kkh-ink-04:      rgba(26, 24, 20, 0.04);
  --kkh-ink-08:      rgba(26, 24, 20, 0.08);
  --kkh-ink-12:      rgba(26, 24, 20, 0.12);
  --kkh-ink-20:      rgba(26, 24, 20, 0.20);
  --kkh-ink-40:      rgba(26, 24, 20, 0.40);
  --kkh-ink-60:      rgba(26, 24, 20, 0.60);
  --kkh-ink-80:      rgba(26, 24, 20, 0.80);

  --kkh-bone-70:     rgba(250, 248, 245, 0.70);
  --kkh-bone-90:     rgba(250, 248, 245, 0.90);

  /* ---------- Semantic colors (use these in components) ---- */
  --color-bg:           var(--kkh-bone);
  --color-bg-alt:       var(--kkh-ivory);
  --color-bg-card:      var(--kkh-cream);
  --color-bg-inverse:   var(--kkh-onyx);

  --color-fg:           var(--kkh-ink);
  --color-fg-muted:     var(--kkh-graphite);
  --color-fg-subtle:    var(--kkh-clay);
  --color-fg-inverse:   var(--kkh-bone);

  --color-line:         var(--kkh-ink-12);
  --color-line-strong:  var(--kkh-ink-20);
  --color-line-hair:    var(--kkh-ink-08);

  --color-accent:       var(--kkh-terracotta);
  --color-accent-deep:  var(--kkh-terracotta-deep);

  --color-link:         var(--kkh-ink);
  --color-link-hover:   var(--kkh-terracotta);

  /* Subtle semantic colors — used in forms / status */
  --color-success:      #5C7A56;
  --color-warning:      #B68134;
  --color-danger:       #A8412C;
  --color-info:         var(--kkh-graphite);

  /* ---------- Typography --------------------------------- */
  --font-display:  'Cormorant Garamond', 'Cormorant', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:     'Geist', 'Söhne', 'GT America', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', 'Geist Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — small and considered, like fine retail */
  --fs-display-xl:  clamp(64px, 9vw, 132px);  /* hero / poster */
  --fs-display-lg:  clamp(48px, 6.4vw, 96px); /* section openers */
  --fs-display-md:  clamp(36px, 4.4vw, 64px); /* feature headers */
  --fs-display-sm:  clamp(28px, 3.4vw, 44px); /* sub-feature */
  --fs-h1:          40px;
  --fs-h2:          32px;
  --fs-h3:          24px;
  --fs-h4:          20px;
  --fs-h5:          16px;
  --fs-body-lg:     19px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;
  --fs-eyebrow:     11px;   /* uppercase, tracked */
  --fs-overline:    13px;   /* sentence-case overline */

  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  --lh-display:     1.02;
  --lh-heading:     1.12;
  --lh-snug:        1.3;
  --lh-body:        1.6;
  --lh-loose:       1.75;

  --ls-display:     -0.02em;
  --ls-heading:     -0.01em;
  --ls-body:        0em;
  --ls-eyebrow:     0.18em;
  --ls-mono:        0.02em;

  /* ---------- Spacing scale (4px base) ------------------- */
  --sp-0:    0;
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;
  --sp-32:   128px;
  --sp-40:   160px;
  --sp-48:   192px;

  /* ---------- Layout ------------------------------------ */
  --container:        1280px;
  --container-narrow: 880px;
  --container-wide:   1480px;
  --gutter:           clamp(20px, 4vw, 56px);
  --section-y:        clamp(64px, 10vw, 144px);

  /* ---------- Radii ------------------------------------- */
  /* Kelly Knows Homes uses RESTRAINED radii — mostly sharp,
     with gentle softening on cards and images. NO pill buttons. */
  --r-none:  0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    6px;       /* default button / input radius */
  --r-lg:    10px;
  --r-xl:    16px;      /* cards */
  --r-2xl:   24px;      /* hero media */

  /* ---------- Shadows ----------------------------------- */
  /* Soft, ink-tinted, low contrast. Never coloured. */
  --shadow-xs:  0 1px 2px rgba(26, 24, 20, 0.04);
  --shadow-sm:  0 2px 6px rgba(26, 24, 20, 0.05), 0 1px 2px rgba(26, 24, 20, 0.04);
  --shadow-md:  0 8px 24px rgba(26, 24, 20, 0.06), 0 2px 6px rgba(26, 24, 20, 0.04);
  --shadow-lg:  0 24px 60px rgba(26, 24, 20, 0.10), 0 6px 16px rgba(26, 24, 20, 0.05);
  --shadow-xl:  0 40px 120px rgba(26, 24, 20, 0.16), 0 10px 24px rgba(26, 24, 20, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--color-line);

  /* ---------- Motion ----------------------------------- */
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
  --dur-glide:  560ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* hover / state */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* entrances */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Element defaults — apply when this stylesheet is linked.
   ============================================================ */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-fg);
  background: var(--color-bg);
}

::selection {
  background: var(--kkh-ink);
  color: var(--kkh-bone);
}

/* Headings — display serif for h1/h2, sans for h3+ by default */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-fg);
  margin: 0;
}

h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-fg);
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line-strong);
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}

a:hover {
  color: var(--color-link-hover);
  border-color: var(--color-link-hover);
}

/* Utility classes ------------------------------------------- */

.kkh-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

.kkh-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-style: italic;
}

.kkh-display-roman {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.kkh-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--color-fg-muted);
}

.kkh-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-mono);
}

/* Container helpers */
.kkh-container       { max-width: var(--container);        margin: 0 auto; padding-inline: var(--gutter); }
.kkh-container-narrow{ max-width: var(--container-narrow); margin: 0 auto; padding-inline: var(--gutter); }
.kkh-container-wide  { max-width: var(--container-wide);   margin: 0 auto; padding-inline: var(--gutter); }