/* PropertyInsider.sg — market-segment colour system (CCR / RCR / OCR)
   ------------------------------------------------------------------
   One palette, used everywhere a chart, map or legend distinguishes the three
   URA market segments. The hues follow the convention Singapore buyers already
   recognise from published segment maps — prime in gold, city fringe in green,
   suburbs in blue — but at a saturation that stays legible as a 2px chart line
   and as small text, which pastel map fills do not.

   Three tones per segment:
     --seg-*        line, bar, marker and legend swatch
     --seg-*-ink    text on a light background (>= 4.5:1 on white)
     --seg-*-tint   large flat fills: map polygons, table row washes, tags

   Contrast between the three is deliberately hue-based rather than
   lightness-based, so the map remains readable in greyscale print and for
   the most common forms of colour-vision deficiency: gold, green and blue
   separate on both axes.

   Loaded by /new-launches/land-cost/ and /price-trends/. Safe to add to any
   page; it defines custom properties only and overrides nothing. */

:root{
  --seg-ccr:#E0A32E;  --seg-ccr-ink:#8A6111;  --seg-ccr-tint:#FBF0DA;  --seg-ccr-deep:#B9821C;
  --seg-rcr:#5EA83B;  --seg-rcr-ink:#35651F;  --seg-rcr-tint:#EAF5E3;  --seg-rcr-deep:#427A28;
  --seg-ocr:#3E7CB1;  --seg-ocr-ink:#24557E;  --seg-ocr-tint:#E4EEF7;  --seg-ocr-deep:#2A5B85;
  --seg-all:#232A1F;
}

/* Legend / chip helpers — opt-in classes, nothing is styled by default. */
.seg-key{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted)}
.seg-key span{display:inline-flex;align-items:center;gap:6px}
.seg-key i{width:13px;height:13px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.14)}
.seg-key i.ccr{background:var(--seg-ccr)}
.seg-key i.rcr{background:var(--seg-rcr)}
.seg-key i.ocr{background:var(--seg-ocr)}

.seg-tag{display:inline-block;font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.seg-tag.ccr{background:var(--seg-ccr-tint);color:var(--seg-ccr-ink);border-color:var(--seg-ccr)}
.seg-tag.rcr{background:var(--seg-rcr-tint);color:var(--seg-rcr-ink);border-color:var(--seg-rcr)}
.seg-tag.ocr{background:var(--seg-ocr-tint);color:var(--seg-ocr-ink);border-color:var(--seg-ocr)}