/* Coffee and Laptop — base styles */

/*
 * COLOR RULE — teal (#1F5E58) contrast
 * Do NOT use teal as foreground (text, icons, outlines) on the brown/espresso
 * backgrounds (#2A1E17, #362619, #211710) — it fails readability there.
 * On brown, use cream (#F4ECE0) or white for foreground instead.
 * Teal IS fine as: a button/block background, a slider accent-color, and as
 * foreground on the cream/white surfaces (#F4ECE0, #FBF7F0).
 * Apply this when importing future design updates.
 */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #F4ECE0;
  color: #33261D;
  font-family: 'Barlow', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #1F5E58; text-decoration: none; }
a:hover { color: #164742; }

input[type=range]::-webkit-slider-thumb { cursor: pointer; }
details summary::-webkit-details-marker { display: none; }

/* Interactive hover states (converted from the design's style-hover bindings) */

/* Primary teal CTA buttons */
.cta { transition: background 0.15s ease, color 0.15s ease; }
.cta:hover { background: #164742; color: #FBF7F0; }

/* Ghost / outline button */
.ghost { transition: background 0.15s ease, color 0.15s ease; }
.ghost:hover { background: #1F5E58; color: #FBF7F0; }

/* Header "Book a call" outline button */
.navbtn { transition: border-color 0.15s ease, color 0.15s ease; }
.navbtn:hover { border-color: #1F5E58; color: #F4ECE0; }