/* ===================================================================
   INDIANA KITCHEN & BATH — DESIGN TOKENS
   Vibe archetype: Editorial Luxury (warm espresso + cream + brass)
   Layout archetype: Editorial Split / Z-Axis Cascade (mixed per section)
   Signature element: the "Material Rail" — a thin horizontal strip of
   real material macro-shots (quartz vein / brass / white oak grain)
   used as a section divider throughout the site, echoing the tactile
   materials a remodel is actually made of.
   =================================================================== */

:root{
  /* ---- color: 6 named hex values ---- */
  --espresso:        #0d0d0d;   /* primary dark ground (hero, nav, footer) */
  --espresso-2:       #171512;  /* raised dark surface */
  --cream:            #f5f0ea;  /* primary light ground */
  --cream-2:          #fbf8f4;  /* raised light surface / cards */
  --brass:            #c9a96e;  /* accent — hardware, dividers, large/decorative use */
  --brass-deep:        #a3814a; /* accent hover / pressed / large text only */
  --brass-link:         #735530; /* accent for SMALL text on light backgrounds — 6.4:1 contrast, WCAG AA safe */
  --ink:               #201d19; /* body text on cream */
  --ink-soft:          #56504a; /* secondary text on cream */
  --bone:               #e7ddd0;/* hairline / border on cream */
  --bone-dark:           #2a2620;/* hairline / border on espresso */

  /* ---- type: display serif + body sans + utility ---- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ---- type scale ---- */
  --fs-hero:   clamp(3.2rem, 7vw, 7.4rem);
  --fs-h1:     clamp(2.4rem, 4.6vw, 4.6rem);
  --fs-h2:     clamp(1.9rem, 3.2vw, 3.1rem);
  --fs-h3:     clamp(1.4rem, 2vw, 1.9rem);
  --fs-lead:   clamp(1.15rem, 1.6vw, 1.45rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.875rem;
  --fs-eyebrow: 0.72rem;

  /* ---- spacing (macro-whitespace) ---- */
  --sp-section: clamp(5rem, 10vw, 9rem);
  --sp-section-sm: clamp(3rem, 6vw, 5rem);
  --sp-gap-lg: clamp(2rem, 4vw, 4rem);
  --sp-gap-md: 1.5rem;
  --sp-gap-sm: 0.75rem;
  --container: min(1280px, 92vw);
  --container-narrow: min(860px, 90vw);

  /* ---- radii + shadow ---- */
  --r-lg: 1.75rem;
  --r-md: 1rem;
  --r-sm: 0.5rem;
  --shadow-soft: 0 30px 80px -30px rgba(13,13,13,0.35);
  --shadow-card: 0 20px 50px -25px rgba(13,13,13,0.28);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-md: 0.7s;
  --dur-lg: 1.1s;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0; line-height:1.05; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{ width: var(--container); margin-inline:auto; }
.container-narrow{ width: var(--container-narrow); margin-inline:auto; }
.section{ padding-block: var(--sp-section); }
.section-sm{ padding-block: var(--sp-section-sm); }
.dark{ background: var(--espresso); color: var(--cream); }
.dark .ink-soft, .dark p{ color: #cfc6ba; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-body); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing:.22em; font-weight:600;
  color: var(--brass-link);
  padding: .4rem .9rem; border:1px solid rgba(201,169,110,.4);
  border-radius: 999px; background: rgba(201,169,110,.08);
}
.dark .eyebrow{ color: var(--brass); border-color: rgba(201,169,110,.3); background: rgba(201,169,110,.1); }

/* buttons — pill, button-in-button trailing icon */
.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  padding: .3rem .3rem .3rem 1.5rem;
  border-radius: 999px; border:1px solid transparent;
  font-size: .95rem; font-weight:600; letter-spacing:.01em;
  transition: transform var(--dur-md) var(--ease-soft), background var(--dur-md) var(--ease-soft);
  white-space:nowrap;
}
.btn .btn-icon{
  width:2.4rem; height:2.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition: transform .5s var(--ease-soft);
}
.btn:hover{ transform: translateY(-2px); }
.btn:hover .btn-icon{ transform: translate(3px,-2px) scale(1.05); }
.btn:active{ transform: scale(.98); }

.btn-primary{ background: var(--brass); color: var(--espresso); }
.btn-primary .btn-icon{ background: rgba(13,13,13,.12); }
.btn-primary:hover{ background: var(--brass-deep); }

.btn-outline{ border-color: rgba(32,29,25,.25); padding:.3rem .3rem .3rem 1.5rem; color: var(--ink); }
.btn-outline .btn-icon{ background: rgba(32,29,25,.06); }
.dark .btn-outline{ border-color: rgba(245,240,234,.3); color: var(--cream); }
.dark .btn-outline .btn-icon{ background: rgba(245,240,234,.08); }

.btn-ghost-dark{ color: var(--cream); padding:.3rem .3rem .3rem 1.4rem; }
.btn-ghost-dark .btn-icon{ background: rgba(245,240,234,.1); }

/* material rail — signature divider */
.material-rail{
  display:flex; height: 86px; width:100%;
  overflow:hidden; border-top:1px solid var(--bone); border-bottom:1px solid var(--bone);
}
.material-rail div{ flex:1; background-size:cover; background-position:center; position:relative; }
.material-rail div::after{ content:''; position:absolute; inset:0; background: rgba(13,13,13,0.08); }

/* cards — double bezel */
.bezel{
  padding: .4rem; border-radius: var(--r-lg);
  background: rgba(32,29,25,.04); border:1px solid rgba(32,29,25,.06);
}
.dark .bezel{ background: rgba(245,240,234,.05); border-color: rgba(245,240,234,.08); }
.bezel-inner{
  border-radius: calc(var(--r-lg) - .4rem);
  background: var(--cream-2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6);
  overflow:hidden;
}
.dark .bezel-inner{ background: var(--espresso-2); box-shadow: inset 0 1px 1px rgba(255,255,255,.04); }

/* reveal-on-scroll base state (GSAP animates these) */
.reveal{ opacity:0; transform: translateY(46px); filter: blur(6px); will-change: transform, opacity; }

/* visually-hidden for a11y */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--brass-deep); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
}

@media (max-width: 860px){
  .section{ padding-block: var(--sp-section-sm); }
  .material-rail{ height: 56px; }
}