/* JMC Joinery — site-wide design tokens & utilities */

:root {
  --cream:  #F7F4EF;
  --ink:    #1A1D21;
  --ink2:   #2A2D31;
  --timber: #B8763A;
  --forest: #2C3E2D;
  --bone:   #EDE7DC;
  --rule:   #E2DBCE;
}

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Anton', 'Archivo Black', Impact, sans-serif; letter-spacing: 0.005em; }
.ff-anton    { font-family: 'Anton', Impact, sans-serif; }
.ff-bebas    { font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 0.02em; }
.ff-archivo  { font-family: 'Archivo Black', Impact, sans-serif; letter-spacing: -0.01em; }
.ff-mono     { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.display-tight { line-height: 0.95; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s }
.reveal-d2 { transition-delay: .16s }
.reveal-d3 { transition-delay: .24s }
.reveal-d4 { transition-delay: .32s }

/* Marquee */
@keyframes marq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marq-track { animation: marq 38s linear infinite; }

/* Testimonials progress fill */
@keyframes tmGrow { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* Service card underline */
.svc-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s cubic-bezier(.2,.7,.2,1);
}
.svc-card:hover .svc-underline { background-size: 100% 1px; }
.svc-card:hover .svc-img { transform: scale(1.04); }
.svc-img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }

/* Form field */
.field {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  padding: 14px 0 10px; font-size: 15px; color: var(--ink); outline: none; border-radius: 0;
  transition: border-color .25s;
}
.field::placeholder { color: rgba(26,29,33,.4); }
.field:focus { border-color: var(--timber); }
.field-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(26,29,33,.55); font-weight: 500; }

/* Selection */
::selection { background: var(--timber); color: var(--cream); }

/* Nav transitions */
.nav-row { transition: padding .35s cubic-bezier(.2,.7,.2,1), background .35s, box-shadow .35s; }

/* Hidden scrollbar */
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { -ms-overflow-style: none; scrollbar-width: none; }

/* Mobile menu entrance */
.mm-enter { animation: mmIn .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mmIn { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }

/* Chatbot widget */
.chat-shadow { box-shadow: 0 30px 80px -30px rgba(26,29,33,0.30), 0 8px 24px -10px rgba(26,29,33,0.18); }
.launcher-shadow { box-shadow: 0 20px 40px -12px rgba(26,29,33,0.35), 0 4px 12px -4px rgba(26,29,33,0.25); }

.dotgrid { background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 14px 14px; }
.papergrid {
  background-image:
    linear-gradient(rgba(26,29,33,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,29,33,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Typing dots */
@keyframes blink { 0%,80%,100% { opacity: .25 } 40% { opacity: 1 } }
.dot { animation: blink 1.2s infinite both; }
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }

/* Chat window entrance */
.chat-pop { animation: chatPop .35s cubic-bezier(.2,.7,.2,1); transform-origin: bottom right; }
@keyframes chatPop { from { opacity: 0; transform: translateY(10px) scale(.97) } to { opacity: 1; transform: none } }

/* Tailwind colour aliases (used by class names) */
.bg-cream  { background-color: var(--cream); }
.bg-ink    { background-color: var(--ink); }
.bg-bone   { background-color: var(--bone); }
.bg-timber { background-color: var(--timber); }
.bg-forest { background-color: var(--forest); }
.text-cream  { color: var(--cream); }
.text-ink    { color: var(--ink); }
.text-timber { color: var(--timber); }
.text-forest { color: var(--forest); }
.border-rule { border-color: var(--rule); }