/* ============================================================================
   pd2-tokens.css — Property Detail v2 design tokens + page shell
   OWNER: W0 (foundation). No other workstream may edit this file.

   Every token below is copied verbatim from the approved prototype
   website html/index/property-detail-v3.html. Workstreams consume these
   variables and must NOT hardcode a colour, radius or shadow that already
   exists here — if a value is missing, escalate rather than inventing one.

   Scoped under .pd2-root so nothing can leak into the live .pd- page or any
   shared component. See PROPERTY_DETAIL_V2_PLAN.md section 0.
   ========================================================================== */

.pd2-root{
  /* brand */
  --pd2-accent:#FF5403;
  --pd2-accent-ink:#D63F00;
  --pd2-accent-soft:#FFF2EB;
  --pd2-accent-line:#FFD9C6;

  /* surfaces */
  --pd2-bg:#FFFFFF;
  --pd2-bg-soft:#FAF8F6;
  --pd2-bg-sunk:#F2EEEA;

  /* ink */
  --pd2-ink:#1A1614;
  --pd2-ink-2:#665C55;
  --pd2-ink-3:#9A918A;

  /* lines */
  --pd2-line:#E9E3DD;
  --pd2-line-strong:#D9D1CA;

  /* status */
  --pd2-green:#0B7A5C;
  --pd2-green-soft:#E6F4EF;
  --pd2-green-line:#C8E6DC;
  --pd2-amber:#9A6100;
  --pd2-amber-soft:#FDF3E2;
  --pd2-amber-line:#F3E2C2;

  /* radii */
  --pd2-r-sm:8px;
  --pd2-r-md:12px;
  --pd2-r-lg:16px;
  --pd2-r-xl:22px;

  /* elevation */
  --pd2-shadow-sm:0 1px 2px rgba(26,22,20,.06), 0 1px 3px rgba(26,22,20,.05);
  --pd2-shadow-md:0 4px 12px rgba(26,22,20,.07), 0 2px 4px rgba(26,22,20,.04);
  --pd2-shadow-lg:0 18px 40px rgba(26,22,20,.13), 0 4px 10px rgba(26,22,20,.06);

  /* layout */
  --pd2-maxw:1200px;
  --pd2-rail:376px;

  /* type */
  --pd2-font-body:'Inter',system-ui,-apple-system,sans-serif;
  --pd2-font-display:'Domine',Georgia,serif;
}

/* ---------------------------------------------------------------- shell -- */
.pd2-root{
  font-family:var(--pd2-font-body);
  color:var(--pd2-ink);
  background:var(--pd2-bg);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.pd2-root *{box-sizing:border-box}
.pd2-root img{max-width:100%;display:block}
.pd2-root button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.pd2-root a{color:inherit;text-decoration:none}
.pd2-root h1,.pd2-root h2,.pd2-root h3{
  font-family:var(--pd2-font-display);margin:0;letter-spacing:-.01em;
}

/* Shown/hidden by state. [hidden] must win over any component display value,
   so every workstream toggles visibility with the `hidden` attribute rather
   than inline styles — that keeps each element's natural grid/flex display. */
.pd2-root [hidden]{display:none !important}

.pd2-container{max-width:var(--pd2-maxw);margin:0 auto;padding:0 24px}

/* Breadcrumb (shell-owned — it sits above every section) */
.pd2-crumbs{
  padding:14px 0 6px;font-size:12.5px;color:var(--pd2-ink-3);
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;
}
.pd2-crumbs a{color:var(--pd2-ink-2)}
.pd2-crumbs a:hover{color:var(--pd2-accent)}
.pd2-crumbs .pd2-crumb-sep{color:var(--pd2-line-strong)}
.pd2-crumbs .pd2-crumb-now{color:var(--pd2-ink);font-weight:500}

/* Two-column decision layout: content + sticky rail.
   W2 fills the left column, W3 the right. */
.pd2-layout{
  display:grid;grid-template-columns:minmax(0,1fr) var(--pd2-rail);
  gap:44px;align-items:start;padding:26px 0 60px;
}

/* The sticky must sit on the GRID ITEM itself — a grid item sticks within its
   grid area, so moving position:sticky to an inner div does nothing under
   align-items:start. That item is this shell's element, not W3's, so the rule
   belongs here rather than in pd2-rail.css. */
.pd2-rail-col{
  position:sticky;top:78px;
  display:flex;flex-direction:column;gap:14px;
}
@media (max-width:1000px){
  .pd2-rail-col{position:static;order:2;margin-top:8px}
}

/* Stub styling — visible only until each workstream replaces its partial. */
.pd2-stub{
  border:2px dashed var(--pd2-line-strong);border-radius:var(--pd2-r-lg);
  padding:26px;margin:12px 0;background:var(--pd2-bg-soft);
  color:var(--pd2-ink-3);font-size:13px;text-align:center;
}
.pd2-stub b{display:block;color:var(--pd2-ink-2);font-size:15px;margin-bottom:4px}

@media (max-width:1000px){
  .pd2-layout{grid-template-columns:1fr;gap:0;padding-top:18px}
}
@media (max-width:720px){
  .pd2-container{padding:0 16px}
  .pd2-crumbs{display:none}
}