/* ==========================================================================
   Dexter Martin Real Estate — Color tokens
   Monochrome foundation: black & white only, restrained gold accent.
   "Let photography provide all color interest alongside your accent."
   ========================================================================== */

:root {
  /* ---- Base palette ---- */
  --dm-black:        #0A0A0A;  /* Primary Black — formal backgrounds, ink */
  --dm-white:        #FFFFFF;  /* Primary White — clean minimal layouts */
  --dm-off-white:    #F7F6F4;  /* Warm paper — card / specimen surfaces */
  --dm-grey-light:   #E8E6E2;  /* Hairline borders, dividers, fills */
  --dm-grey:         #888888;  /* Supporting Grey — captions, labels */
  --dm-grey-mid:     #999999;  /* Muted label grey */
  --dm-grey-dark:    #444444;  /* Secondary ink on light */
  --dm-ink:          #1A1A1A;  /* Body text on white */
  --dm-ink-soft:     #555555;  /* Secondary body text on white */

  /* ---- Accent (PERSONAL BRAND ONLY — use sparingly, never in co-brand) ---- */
  --dm-gold:         #FFDE59;  /* Accent Gold — callouts & highlights only */
  --dm-gold-ink:     #0A0A0A;  /* Text that sits on gold */

  /* ---- Photo overlay (signature education-carousel treatment) ---- */
  --dm-overlay:      rgba(20, 20, 20, 0.72); /* dark box behind text over photos */
  --dm-overlay-soft: rgba(20, 20, 20, 0.45);
  --dm-scrim-grad:   linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0) 60%); /* @kind color */

  /* ==== Semantic aliases — reference THESE in components ==== */
  /* Surfaces */
  --surface-page:      var(--dm-white);
  --surface-card:      var(--dm-off-white);
  --surface-inverse:   var(--dm-black);   /* black formal background */
  --surface-overlay:   var(--dm-overlay);

  /* Text */
  --text-primary:      var(--dm-ink);
  --text-secondary:    var(--dm-ink-soft);
  --text-muted:        var(--dm-grey);
  --text-label:        var(--dm-grey-mid);
  --text-on-dark:      var(--dm-white);
  --text-on-dark-soft: #BBBBBB;
  --text-on-dark-mute: #777777;

  /* Lines & accent */
  --border-hairline:   var(--dm-grey-light);
  --border-on-dark:    rgba(255,255,255,0.22);
  --accent:            var(--dm-gold);
  --accent-on:         var(--dm-gold-ink);

  /* Interaction (monochrome — opacity & ink shifts, no color hovers) */
  --hover-overlay:     rgba(10,10,10,0.04);
  --hover-overlay-dark:rgba(255,255,255,0.08);
}