/* ============================================================
   Dear Care Home — Design System (Editorial Warmth)
   Shared tokens + components for the site-wide reframe.
   Type: Newsreader (serif display) + Mulish (sans UI/body).
   Include on every page:  <link rel="stylesheet" href="/design-system.css">
   ============================================================ */

:root{
  /* ---- Surfaces ---- */
  --canvas:#F4ECD8;        /* page background            */
  --surface:#FBF6EA;       /* cards / light surfaces     */
  --band:#EFE7D2;          /* muted section bands        */

  /* ---- Brand greens ---- */
  --forest:#2C4230;        /* deep panels / brand text   */
  --forest-deep:#243320;   /* footer                     */
  --green-ink:#33452F;     /* text on sage pills         */
  --sage-ink:#3C5A40;      /* icons / dots / logo arc    */
  --nav-ink:#3F4A3A;       /* nav + trust labels         */

  /* ---- Terracotta ---- */
  --terra:#A9552F;         /* primary accent             */
  --terra-hover:#95461F;   /* primary hover              */
  --terra-deep:#8F4526;    /* deep accent / eyebrow text */

  /* ---- Text ---- */
  --ink:#29281F;           /* headings / strong          */
  --body:#5A574C;          /* body copy                  */
  --muted:#7C7767;         /* meta text                  */

  /* ---- Accent pills ---- */
  --sage:#DCE3CC;   --peach:#EFDCCE;   --gold:#EBDCA9;
  --gold-ink:#7A6320; --gold-dot:#B08B2E; --tan:#E0D6BC;

  /* ---- On-dark creams ---- */
  --cream-on-dark:#F7F1E2; --cream-accent:#EAD9C2; --footer-text:#EAE3D0;
  --footer-dot:#C8734B;

  /* ---- Type ---- */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Mulish',system-ui,-apple-system,Segoe UI,sans-serif;

  /* ---- Radii ---- */
  --r-pill:999px; --r-panel:34px; --r-card:24px; --r-soft:22px;
  --r-tile:20px; --r-sm:16px; --r-xs:14px;

  /* ---- Shadows ---- */
  --sh-card:0 24px 48px -34px rgba(41,40,31,.4);
  --sh-guide:0 24px 48px -38px rgba(41,40,31,.4);
  --sh-panel:0 50px 90px -50px rgba(28,42,31,.7);
  --sh-terra-panel:0 50px 90px -50px rgba(143,69,38,.75);
  --sh-cta:0 12px 26px -14px rgba(169,85,47,.7);
  --sh-image:0 30px 60px -30px rgba(41,40,31,.5);

  /* ---- Layout ---- */
  --maxw:1560px;
  --gutter:clamp(20px,4vw,64px);
}

*{box-sizing:border-box;}
html,body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}

/* ---- Layout helpers ---- */
.dch-wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.dch-section{max-width:var(--maxw);margin:0 auto;padding:96px var(--gutter) 40px;}

/* ---- Headings ---- */
.dch h1,.dch h2,.dch h3,.dch-serif{font-family:var(--serif);color:var(--ink);
  letter-spacing:-.015em;font-weight:500;margin:0;}
.dch h3{font-weight:600;}

/* ---- Eyebrow chip ---- */
.dch-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  border-radius:var(--r-pill);font:800 12px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;background:var(--sage);color:var(--green-ink);}
.dch-eyebrow.is-peach{background:var(--peach);color:var(--terra-deep);}
.dch-eyebrow.is-gold{background:var(--gold);color:var(--gold-ink);}
.dch-eyebrow.is-dark{background:rgba(244,236,216,.14);border:1px solid rgba(244,236,216,.24);color:var(--cream-accent);}
.dch-eyebrow.is-terra{background:rgba(251,246,234,.16);border:1px solid rgba(251,246,234,.28);color:var(--surface);}

/* ---- Buttons ---- */
.dch-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r-pill);font:700 15px/1 var(--sans);cursor:pointer;
  border:none;transition:background .18s ease,border-color .18s ease,transform .18s ease;}
.dch-btn svg{width:16px;height:16px;flex:none;}
.dch-btn-primary{padding:12px 22px;background:var(--terra);color:var(--surface);
  box-shadow:var(--sh-cta);}
.dch-btn-primary:hover{background:var(--terra-hover);}
.dch-btn-invert{padding:14px 26px;background:var(--surface);color:var(--terra);font-weight:800;}
.dch-btn-invert:hover{background:#fff;}
.dch-btn-ghost{padding:14px 24px;background:transparent;border:1.5px solid rgba(44,66,48,.3);
  color:var(--forest);font-weight:700;}
.dch-btn-ghost:hover{background:rgba(44,66,48,.06);}
.dch-btn-ghost.on-dark{border-color:rgba(251,246,234,.5);color:var(--surface);}
.dch-btn-ghost.on-dark:hover{background:rgba(251,246,234,.12);}
.dch-btn-lg{padding:17px 32px;font-size:17px;}

/* ---- Nav ---- */
.dch-nav{position:sticky;top:0;z-index:40;background:rgba(244,236,216,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(41,40,31,.08);}
.dch-nav .bar{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:16px var(--gutter);}
.dch-brand{display:flex;align-items:center;gap:11px;}
.dch-brand img{width:38px;height:38px;border-radius:50%;object-fit:contain;flex:none;}
.dch-brand .word{font:600 23px/1 var(--serif);color:var(--forest);letter-spacing:-.01em;}
.dch-nav .links{display:flex;align-items:center;gap:34px;}
.dch-nav .links a{font:600 15px/1 var(--sans);color:var(--nav-ink);}
.dch-nav .links a:hover{color:var(--terra);}
.dch-nav-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--forest);}

/* ---- Trust strip ---- */
.dch-trust{border-top:1px solid rgba(41,40,31,.09);border-bottom:1px solid rgba(41,40,31,.09);
  background:var(--band);}
.dch-trust .row{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:22px;padding:20px var(--gutter);}
.dch-trust .item{display:flex;align-items:center;gap:11px;font:700 15px/1.2 var(--sans);color:var(--nav-ink);}
.dch-trust .divider{width:1px;height:22px;background:rgba(41,40,31,.14);}

/* ---- Section header ---- */
.dch-section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;flex-wrap:wrap;margin-bottom:48px;}
.dch-section-head .lead-col{max-width:600px;}
.dch-section-head h2{font-size:46px;line-height:1.08;margin-top:20px;}
.dch-section-head .lede{font:400 17px/1.6 var(--sans);color:var(--body);max-width:340px;margin:0;}

/* ---- Cards: generic surface ---- */
.dch-card{background:var(--surface);border:1px solid rgba(41,40,31,.07);
  border-radius:var(--r-card);box-shadow:var(--sh-card);}

/* ---- Home card ---- */
.dch-home-card{background:var(--surface);border:1px solid rgba(41,40,31,.07);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;}
.dch-home-card .media{position:relative;height:220px;background:var(--sage);}
.dch-home-card .media img{width:100%;height:100%;object-fit:cover;}
.dch-home-card .avail{position:absolute;top:14px;left:14px;padding:7px 13px;border-radius:var(--r-pill);
  background:rgba(251,246,234,.94);font:800 12px/1 var(--sans);color:var(--green-ink);
  display:inline-flex;align-items:center;gap:6px;}
.dch-home-card .avail .dot{width:7px;height:7px;border-radius:50%;background:var(--sage-ink);}
.dch-home-card .avail.is-low{color:var(--terra-deep);}
.dch-home-card .avail.is-low .dot{background:var(--terra);}
.dch-home-card .body{padding:24px;display:flex;flex-direction:column;flex:1;}
.dch-home-card h3{font-size:22px;margin:0;}
.dch-home-card .rating{font:800 15px/1 var(--sans);color:var(--terra);white-space:nowrap;}
.dch-home-card .loc{display:flex;align-items:center;gap:7px;font:600 14px/1 var(--sans);color:var(--muted);margin-top:6px;}
.dch-home-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px;}
.dch-tag{padding:6px 12px;border-radius:var(--r-pill);font:700 12.5px/1 var(--sans);background:var(--sage);color:var(--green-ink);}
.dch-tag.is-peach{background:var(--peach);color:var(--terra-deep);}
.dch-tag.is-gold{background:var(--gold);color:var(--gold-ink);}
.dch-home-card .foot{display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;margin-top:auto;border-top:1px solid rgba(41,40,31,.09);}
.dch-home-card .price{font:800 20px/1 var(--sans);color:var(--ink);}
.dch-home-card .price .per{font:600 13px/1 var(--sans);color:var(--muted);}
.dch-home-card .view{font:800 14px/1 var(--sans);color:var(--terra);display:inline-flex;align-items:center;gap:6px;}
.dch-home-card .view svg{width:15px;height:15px;}

/* ---- Guide card ---- */
.dch-guide-card{display:block;background:var(--surface);border:1px solid rgba(41,40,31,.07);
  border-radius:var(--r-soft);padding:30px;box-shadow:var(--sh-guide);transition:border-color .18s ease;}
.dch-guide-card:hover{border-color:rgba(169,85,47,.4);}
.dch-guide-card h3{font-size:22px;line-height:1.25;margin:20px 0 10px;}
.dch-guide-card p{font:400 15px/1.6 var(--sans);color:var(--body);margin:0 0 20px;}
.dch-guide-card .more{font:800 14px/1 var(--sans);color:var(--terra);display:inline-flex;align-items:center;gap:6px;}
.dch-cat{display:inline-flex;padding:8px 14px;border-radius:var(--r-pill);font:800 11.5px/1 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;background:var(--sage);color:var(--green-ink);}
.dch-cat.is-peach{background:var(--peach);color:var(--terra-deep);}
.dch-cat.is-gold{background:var(--gold);color:var(--gold-ink);}

/* ---- Footer ---- */
.dch-footer{background:var(--forest-deep);color:var(--footer-text);}
.dch-footer .inner{max-width:var(--maxw);margin:0 auto;padding:70px var(--gutter) 40px;}
.dch-footer .top{display:flex;gap:60px;justify-content:space-between;flex-wrap:wrap;
  padding-bottom:50px;border-bottom:1px solid rgba(244,236,216,.14);}
.dch-footer .brand-col{max-width:340px;}
.dch-footer .brand-col .b{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
.dch-footer .brand-col .b img{width:38px;height:38px;border-radius:50%;object-fit:contain;}
.dch-footer .brand-col .b .word{font:600 23px/1 var(--serif);color:var(--canvas);}
.dch-footer .brand-col p{font:400 15.5px/1.65 var(--sans);color:rgba(234,227,208,.72);margin:0 0 22px;}
.dch-footer .cols{display:flex;gap:64px;flex-wrap:wrap;}
.dch-footer .cols h4{font:800 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(234,227,208,.55);margin:0 0 18px;}
.dch-footer .cols .group{display:flex;flex-direction:column;gap:13px;}
.dch-footer .cols a{font:600 15px/1 var(--sans);color:var(--footer-text);}
.dch-footer .cols a:hover{color:#fff;}
.dch-footer .bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding-top:26px;font:600 14px/1 var(--sans);color:rgba(234,227,208,.6);}
.dch-footer .bottom .phone{display:flex;align-items:center;gap:10px;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  :root{--gutter:22px;}
  .dch-section{padding:64px var(--gutter) 32px;}
  .dch-nav .links{display:none;}
  .dch-nav-toggle{display:inline-flex;}
  .dch-nav .bar{padding:14px var(--gutter);}
  .dch-section-head h2{font-size:34px;}
  .dch-section-head .lede{max-width:none;}
  .dch-trust .divider{display:none;}
}
@media (max-width:640px){
  .dch-brand .word{font-size:20px;}
  .dch-footer .top{gap:34px;}
  .dch-footer .cols{gap:40px;}
}

/* Mobile nav drawer (toggled via .is-open on .dch-nav) */
.dch-nav .mobile-menu{display:none;}
@media (max-width:900px){
  .dch-nav.is-open .mobile-menu{display:flex;flex-direction:column;gap:4px;
    padding:8px var(--gutter) 20px;border-top:1px solid rgba(41,40,31,.08);}
  .dch-nav .mobile-menu a{padding:12px 0;font:700 16px/1 var(--sans);color:var(--nav-ink);}
  .dch-nav .mobile-menu .dch-btn{margin-top:10px;}
}
